如何将此jQuery代码转换为jQuery函数？

Question

我有一些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'; 
      } 
     } 
    }); 
}); 

我想知道一些事情，

一）参照上面的代码，我如何将其转换为 功能，代码有像，选择很少变化name和 window.location的url。

b）下面我要调用下面的代码，它是函数吗？功能上 去？或动态功能？

$('selector').event(function(){ 
    //jQuery Code in wake of event being triggered. 
}); 

Answer 1

我会写一个小插件吧：

(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事件方法;事件处理程序将是一个函数引用

Answer 2

一） 我通过采取不断变化的领域PARAMS开始：

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） 我把它叫做一个匿名事件处理程序（功能）。

Answer 3

这应该为你做它（通常是一个匿名函数参考）：

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>