jQuery form插件的使用之处理server返回的JSON， XML，HTML数据

沃梦达教程 Java开发

2024-02-29 10

使用jQuery form插件可以方便地实现Ajax提交表单数据，同时也可以处理server返回的JSON、XML、HTML数据。下面是处理server返回的Json、XML和HTML数据的详细攻略。

使用jQuery form插件可以方便地实现Ajax提交表单数据，同时也可以处理server返回的JSON、XML、HTML数据。下面是处理server返回的Json、XML和HTML数据的详细攻略。

一、处理server返回的JSON数据

（1）通过Ajax提交表单后，在success回调函数中使用jQuery.form的json解析方法解析返回的JSON数据。

示例代码：

$('#myForm').ajaxForm({
    url: '/submit',
    type: 'post',
    dataType: 'json',
    success: function(data) {
        //解析返回的JSON数据，取出需要的值
        var result = data.result;
        var message = data.message;
        //处理数据
        //......
    }
});

（2）JSON数据解析完后，可以根据需要使用解析后的数据进行其他的处理，如显示提示信息等。

二、处理server返回的XML数据

（1）同上，通过Ajax提交表单后，在success回调函数中使用jQuery.form的XML解析方法解析返回的XML数据。

示例代码：

$('#myForm').ajaxForm({
    url: '/submit',
    type: 'post',
    dataType: 'xml',
    success: function(data) {
        //解析返回的XML数据，取出需要的值
        var result = $(data).find('result').text();
        var message = $(data).find('message').text();
        //处理数据
        //......
    }
});

（2）XML数据解析完后，可以根据需要使用解析后的数据进行其他的处理，如显示提示信息等。

三、处理server返回的HTML数据

（1）通过Ajax提交表单后，在success回调函数中使用jQuery.form的html解析方法解析返回的HTML数据。

示例代码：

$('#myForm').ajaxForm({
    url: '/submit',
    type: 'post',
    dataType: 'html',
    success: function(data) {
        //解析返回的HTML数据，取出需要的值
        var result = $(data).find('#result').html();
        var message = $(data).find('#message').html();
        //处理数据
        //......
    }
});