Nginx Ajax Post
Nginx Ajax Post
我计划从 Apache2+Varnish 迁移到 Nginx,因为其中一个站点将 运行 SSL 而我不想安装 运行 另一项仅用于 SSL 的服务,当一切都可以用Nginx来实现。
我遇到的问题是一个简单的 html 网站有联系表格,该表格正在向 PHP 文件发出 AJAX 请求,回复显示在表格上。
发生的事情是我被重定向到 PHP 脚本而不是从脚本获取响应并显示它的表单。
这是联系表格:
<div class="feedback" id="contact">
<div class="wrap">
<h2>Get in Touch</h2>
<div class="line blue"><span> </span></div>
<h4>Contact Us! We would love to answer any of your questions & give you a Free quote!</h4>
<form id="contactForm" action="form.php" method="POST">
<div class="text-box">
<label>
<input type="text" name="name" class="textbox" value="Your Name:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name:';}">
</label>
<label>
<input type="text" name="email" class="textbox" value="Your Email:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email:';}">
</label>
<div class="clear"></div>
</div>
<textarea name="message" placeholder="Message:"></textarea>
<script>$('input,textarea').focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'))
$(this).attr('placeholder','');
});
$('input,textarea').blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
});
</script>
<div class="contactResponse"></div>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
<script>
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( ".contactResponse" ).html(data);
if ($('.contactResponse:contains("Thank you")').length > 0) {
/* Disable the button. */
$submit.attr("disabled", true);
/* Change the button text. */
$submit.text('Message Sent');
}
else{
/* Change the button text. */
$submit.text('Message NOT Sent');
}
});
这是我要发布到的 PHP 文件:
$to = "mail@gdomain.com";
$subject = "Contact Form";
$message = "$message";
$headers = "From: $email\r\n";
$headers .= "Bcc: someone.else@domain.com\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Date: " . date("r") ."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
if (strpos($ref,'example') !== false) {
$spam = 1;
}
else{
$spam = 0;
}
if(empty($name) || empty($email) || empty($message) || $spam === 0) {
echo "<h2>Please fill all the fields.</h2>";
}
else{ $sent = mail($to,$subject,$message,$headers);
if($sent){
echo "<h2>Thank you for contacting us!</h2>";
}
}
?>
这是我的 Nginx 服务器块:
server {
listen 443;
#server_name example.com;
root /var/www/example.com/public_html;
index index.html index.htm;
ssl on;
ssl_certificate /etc/nginx/ssl/certificate.crt;
ssl_certificate_key /etc/nginx/ssl/ssl.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
ssl_prefer_server_ciphers on;
location / {
error_page 404 /404.html;
#To allow POST on static pages
error_page 405 =200 $uri;
add_header 'Access-Control-Allow-Origin' 'http://example.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'POST';
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}
}
此外,我在使用 jQuery 时遇到了一些画廊问题,我在浏览器控制台中收到 "Uncaught ReferenceError: $ is not defined" 错误。
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// https://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap'
});
},
};
// Run the show!
filterList.init();
});
这是 运行在 Apache2+Varnish 上没有问题。
谢谢!
最终通过更新 jQuery 版本解决了问题。
我真的不知道为什么会出现问题,因为 JS/jQuery 不是服务器端语言,它没有任何意义,但现在可以正常工作。
我计划从 Apache2+Varnish 迁移到 Nginx,因为其中一个站点将 运行 SSL 而我不想安装 运行 另一项仅用于 SSL 的服务,当一切都可以用Nginx来实现。
我遇到的问题是一个简单的 html 网站有联系表格,该表格正在向 PHP 文件发出 AJAX 请求,回复显示在表格上。
发生的事情是我被重定向到 PHP 脚本而不是从脚本获取响应并显示它的表单。
这是联系表格:
<div class="feedback" id="contact">
<div class="wrap">
<h2>Get in Touch</h2>
<div class="line blue"><span> </span></div>
<h4>Contact Us! We would love to answer any of your questions & give you a Free quote!</h4>
<form id="contactForm" action="form.php" method="POST">
<div class="text-box">
<label>
<input type="text" name="name" class="textbox" value="Your Name:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name:';}">
</label>
<label>
<input type="text" name="email" class="textbox" value="Your Email:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email:';}">
</label>
<div class="clear"></div>
</div>
<textarea name="message" placeholder="Message:"></textarea>
<script>$('input,textarea').focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'))
$(this).attr('placeholder','');
});
$('input,textarea').blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
});
</script>
<div class="contactResponse"></div>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
<script>
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});
posting.done(function( data )
{
/* Put the results in a div */
$( ".contactResponse" ).html(data);
if ($('.contactResponse:contains("Thank you")').length > 0) {
/* Disable the button. */
$submit.attr("disabled", true);
/* Change the button text. */
$submit.text('Message Sent');
}
else{
/* Change the button text. */
$submit.text('Message NOT Sent');
}
});
这是我要发布到的 PHP 文件:
$to = "mail@gdomain.com";
$subject = "Contact Form";
$message = "$message";
$headers = "From: $email\r\n";
$headers .= "Bcc: someone.else@domain.com\r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Date: " . date("r") ."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
if (strpos($ref,'example') !== false) {
$spam = 1;
}
else{
$spam = 0;
}
if(empty($name) || empty($email) || empty($message) || $spam === 0) {
echo "<h2>Please fill all the fields.</h2>";
}
else{ $sent = mail($to,$subject,$message,$headers);
if($sent){
echo "<h2>Thank you for contacting us!</h2>";
}
}
?>
这是我的 Nginx 服务器块:
server {
listen 443;
#server_name example.com;
root /var/www/example.com/public_html;
index index.html index.htm;
ssl on;
ssl_certificate /etc/nginx/ssl/certificate.crt;
ssl_certificate_key /etc/nginx/ssl/ssl.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
ssl_prefer_server_ciphers on;
location / {
error_page 404 /404.html;
#To allow POST on static pages
error_page 405 =200 $uri;
add_header 'Access-Control-Allow-Origin' 'http://example.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'POST';
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
}
}
此外,我在使用 jQuery 时遇到了一些画廊问题,我在浏览器控制台中收到 "Uncaught ReferenceError: $ is not defined" 错误。
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// https://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap'
});
},
};
// Run the show!
filterList.init();
});
这是 运行在 Apache2+Varnish 上没有问题。
谢谢!
最终通过更新 jQuery 版本解决了问题。
我真的不知道为什么会出现问题,因为 JS/jQuery 不是服务器端语言,它没有任何意义,但现在可以正常工作。