具有不同 Success 功能的 Ajax 多种表单

Question

感谢 StackOverflow 上的帮助，我能够验证两个表单并将其提交到不同的操作页面。我需要根据提交的表单更改成功功能。

这是我的 javascript：

$("form").each(function() {
$(this).validate({
    submitHandler: function(form) {
        var $form=$(this)
        var data= $form.serialize()

        $.ajax({
            type    : 'POST',
            url     : $(form).attr('action'),
            data    : $(form).serialize(),
            cache   : false,
            dataType: 'text',
            success: function(data){
                    },
        });
        return false; // Temporary
    }
});

这是表格 1 的成功：

 $("#e1").prepend(data);
 var magnificPopup = $.magnificPopup.instance; 
 magnificPopup.close(); 

这是表格 2 的成功：

$("#messageTran").html(data);
$("#messageTran").hide();
$("#messageTran").fadeIn(1500);

我实现这一目标的最佳方式是什么？我对javascript很陌生，无法找到答案。我尝试使用 if else 语句传递表单属性，但没有运气。先感谢您。

Answer 1

如您所知，每个操作页面都会将echo 信息返回到主页，这在AJAX success: 函数内部可用。

您可以在返回的数据中添加一个“标头”，以标识哪个操作页面正在发送数据，然后使用 IF / ELSE 结构来执行相应的操作。

比如action pagefirst.php可以发送这个文本：

echo '1~This is from first.php';

在success函数中，你可以去掉那个“header”字符：

var hh = data.slice(0,1);
var therest = data.slice(2);
if (hh == 1) {
    $("#e1").prepend(therest);
    var magnificPopup = $.magnificPopup.instance; 
    magnificPopup.close(); 
} else {
    $("#messageTran").html(therest);
    $("#messageTran").hide();
    $("#messageTran").fadeIn(1500);
}

jsFiddle Demo

---

回答一个问题，重新使用 JSON 而不是手动解析的字符串：

当然可以使用 JSON，原理相同。但是用简洁的答案来解释更具挑战性。对于 JSON 初学者来说，这是一个比仅使用上述方法要大得多的挑战——至少，一开始对我来说肯定是这样。由于原理相同，所以我选择了这样的方式来传达这个概念。

对于那些寻求使用 JSON 的演示的人，我可以推荐以下资源：

http://www.fourfront.us/blog/store-html-table-data-to-javascript-array

http://blog.kevinchisholm.com/javascript/associative-arrays-in-javascript

http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/

jquery AJAX and json format

Passing an array from PHP to Javascript using JQuery & JSON

http://xoops.org/modules/news/article.php?storyid=5103