我有一个页面联系人。我的模板中的联系人表单的php。我想在表单中添加jquery验证和一些奇特的ajax操作。这已经是一个简单PHP页面中的工作代码,但在wordpress中工作失败。
我的联系方式:
<form id="contact_form" method="POST" action="" enctype="application/x-www-form-urlencoded" novalidate="novalidate">
<input type="text" name="name" maxlength="30" id="name" placeholder="Your name">
<input type="text" name="email" maxlength="30" id="email" placeholder="Your email">
<textarea rows="2" cols="40" name="message" id="message" placeholder="Your message"></textarea>
<input type="text" id="phone" name="phone" size="15" placeholder="Please do not fill your phone number">
<input type="submit" id="click" class="button" value="Submit">
<div id="loading_icon"><img src="/wp-content/themes/owlish/img/loading.gif" alt="loading"></div>
<div id="response"></div>
</form>
函数中的ajax函数。php
add_action(\'wp_ajax_sendmail\', \'sendmail\');
add_action(\'wp_ajax_nopriv_sendmail\', \'sendmail\');
function sendmail() {
if(isset($_POST[\'Submit\'])) {
echo \'ajax success\';
} else {
echo "<p class=\'error\'>nothing submitted</p>";
}
die();
}
和我的javascript操作:
$(document).ready(function(){
$("#contact_form").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
message: "required"
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email adress",
email: "Please enter your valid email adress"
},
message: "Please enter a short message, what your inquiry is about"
},
submitHandler: function(form) {
$(\'#loading_icon\').show();
$(\'#click\').hide();
var params = $(form).serialize();
$.ajax ({
type: \'POST\',
url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
data: params,
success: function(response) {
$(\'#response\').hide();
$(\'#response\').html(response);
$(\'#response\').fadeIn(\'slow\');
$(\'#loading_icon\').hide();
}
});
}
});
});
正确加载了所需的文件(/1.10.1/jquery.min.js,jquery.validate.js),但是,尽管我
wp_ajax_nopriv_sendmail
在函数中。php。控制台不会返回任何错误。我相信我遗漏了一些wp特定的事实,但哪一个?
提前感谢
最合适的回答,由SO网友:Matt Royal 整理而成
WordPress正在noconflict模式下运行Jquery。(WordPress Codex Reference) 或者阅读我不久前发布的这篇简短文章。View it here.
您需要更换:
$(document).ready(function(){
使用此选项:
jQuery(document).ready(function($){
所以,大家一起试试这个:
jQuery(document).ready(function($){
$("#contact_form").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
message: "required"
},
messages: {
name: "Please enter your name",
email: {
required: "Please enter your email adress",
email: "Please enter your valid email adress"
},
message: "Please enter a short message, what your inquiry is about"
},
submitHandler: function(form) {
$(\'#loading_icon\').show();
$(\'#click\').hide();
var params = $(form).serialize();
$.ajax ({
type: \'POST\',
url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
data: params + "&action=sendmail",
success: function(response) {
$(\'#response\').hide();
$(\'#response\').html(response);
$(\'#response\').fadeIn(\'slow\');
$(\'#loading_icon\').hide();
}
});
}
});
});
SO网友:Carlo Fontanos
下面的行可能没有正确读取您的操作,这就是它返回0的原因
url: \'<?php echo admin_url( \'admin-ajax.php\' ); ?>\',
data: params + "&action=sendmail",
考虑发出类似以下内容的AJAX请求:
// the value of \'action\' is the key that will be identified by the \'wp_ajax_\' hook
var data = {
\'action\': \'my_action\',
\'message\': 123
};
var ajaxurl = \'<?php echo admin_url(\'admin-ajax.php\'); ?>\';
$.post(ajaxurl, data, function(response) {
// Output the response which should be \'Hellow World\'
alert(response);
});
然后在回拨中:
// Check if set and if the received value is 123
if (isset($_POST[\'message\']) && $_POST[\'message\'] == 123 ) {
echo \'Hello World\';
}
// Always exit to avoid further execution
exit();
我在WordPress博客中找到了一个非常简单的教程,它基本上描述了实现AJAX的正确方法:
Implementing AJAX in WordPress