我有一些jQuery代码,一次又一次地重复,我想通过将其转换为函数来减少我正在编写的代码。这是我正在使用的代码。
$('form#save-user button[name="save-user"]').click(function() {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = "index.php?users&option=edit&user_id="+msg+'&msg=success';
}
}
});
});
$('form#save-user button[name="save-user-close"]').click(function() {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = 'index.php?users';
}
}
});
});
$('form#save-user button[name="save-user-new"]').click(function() {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = 'index.php?users&option=create';
}
}
});
});
我想知道一些事情,
a)参考上面的代码,我该如何将其转换为 函数,因为代码只有很少的变化,如选择器名称和 window.location的网址。
b)我怎么称呼下面的代码,是函数吗?功能 走吧?还是动态函数?
$('selector').event(function(){
//jQuery Code in wake of event being triggered.
});
答案 0 :(得分:5)
我会为它写一个小插件:
(function ($) {
jQuery.fn.myClick = function (destination) {
this.click(function () {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = destination(msg);
}
}
});
});
}
}(jQuery));
然后调用它就可以了:
$('form#save-user button[name="save-user-close"]').myClick(function() {
return 'index.php?users&option=create';
});
和
$('form#save-user button[name="save-user"]').myClick(function (msg) {
return "index.php?users&option=edit&user_id="+msg+'&msg=success';
});
你应该能够看到我们要去哪里;我们将参数添加到我们创建的小方法中,您可以在其中指定每次调用之间的更改。
因为在这个例子中,window.location
取决于AJAX响应(当我们调用函数时我们不知道响应!),我们不能简单地提供一个字符串(或类似的东西)参数。相反,我们传递一个函数,一旦收到AJAX响应就调用它,只要msg
作为变量;并依靠函数提供我们设置为window.location
的字符串。
关于第二个问题,您将事件处理程序传递给jQuery事件方法;事件处理程序将是函数引用(通常是对匿名函数的引用)
答案 1 :(得分:4)
<强> A)强> 我首先将变化的字段作为参数:
function doPost(redirectUrl) {
var formData = 'option=saveuser&'+$('form#save-user').serialize();
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = redirectUrl.indexOf("{0}") >= 0 ? redirectUrl.replace("{0}", msg) : redirectUrl;
}
}
});
}
$('form#save-user button[name="save-user"]').click(function() {
doPost("index.php?users&option=edit&user_id={0}&msg=success");
});
$('form#save-user button[name="save-user-close"]').click(function() {
doPost("index.php?users");
});
<强> b)中强> 我称之为匿名事件处理程序(函数)。
答案 2 :(得分:1)
这应该适合你:
JQuery:
function saveuser(formData) {
$.ajax({
type: 'POST',
url: 'process.php',
data: formData,
success: function(msg){
if(msg === 'empty') {
alert('Required Values Missing');
} else if(msg === 'duplicateEmail'){
alert('Email already exist');
} else {
window.location = "index.php?users&option=...';
}
}
});
}
HTML:
<element onClick="saveuser('the-form-data')"></element>