如何将多个值返回给jQuery.Ajax的 success 函数？

Question

我尝试返回多个值给jqueryAjax的success函数，但是失败了。这是我目前所做的......

 String emp = request.getParameter("ID");
    ArrayList<String> al = new ArrayList();
    al=ur.editLeave(emp);
    String cl = al.get(0);
    out.print(cl);
    out.print(al.get(1));
    out.print(al.get(2));

从这个JSP页面中，我试图返回3个值。

$.ajax({
    type: "GET",
    data: 'ID=' + idel,
    async: false,
    url: "ForleaveMaster.jsp?Eleave=l",
    success: function(cl, ml, ot) {
        alert(cl, ml, ot);
        $('input[id=ELM_CL]').val($.trim(cl));
        $('input[id=ELM_ML]').val($.trim(cl));
        $('input[id=ELM_OT]').val($.trim(cl));
    },
    error: function() {}
});

请帮我一下。

- Sudarshan

---

你可以使用某个分隔符合并数据，并在ajax响应中解析它，或者将其作为json发送并在ajax响应中解析json..! - Sudhir Bastakoti

你正在将所有输入字段设置为相同的值 $('input[id=ELM_OT]').val($.trim(cl)); 所有字段都将变成cl。 - JanR

你的成功函数只能有一个参数：如果你需要多个值，那么将这些值包装在服务器端对象中，并使用JSON进行字符串化，以便返回一个字符串，在客户端上解析回一个对象，从中可以检索所需的不同值。 - frenchie

请你给我解释一下，如何封装数值。 - Sudarshan

Answer 1

你返回的所有内容都将作为第一个参数传递给你的函数。

$.ajax({
    type: "GET",
    data: 'ID=' + idel,
    async: false,
    url: "ForleaveMaster.jsp?Eleave=l",
    success: function(data) {
        var array_data = String(data).split("\n");
        var cl = array_data[0],
            mt = array_data[1],
            ot = array_data[2];
        alert(cl,ml,ot);
        $('input[id=ELM_CL]').val($.trim(cl));
        $('input[id=ELM_ML]').val($.trim(cl));
        $('input[id=ELM_OT]').val($.trim(cl));
    },
    error: function() {                        
    }
});

- mishik

---

我对 data.spit() 方法很感兴趣！ - user1864610

我需要下载任何插件才能使用data.split函数吗？因为当我使用它时出现了错误：data.spit不是一个函数。 - Sudarshan

让我们在聊天室继续。 - mishik

Answer 2

你的方法肯定行不通：你只能返回一个“item”。诀窍是将所有值放入该项目中。将响应编码为JSON字符串（抱歉 - 不能在JSP中帮助您），但它应该看起来像这样：

{"cl":"1", "dl":"2", "cl":"3"}

然后修改您的AJAX函数：

$.ajax({
        type: "GET",
        data: 'ID=' + idel,
        dataType:'json'
        async: false,
        url: "ForleaveMaster.jsp?Eleave=l",
        success: function(data) {
            alert(data.cl,data.ml,data.ot);
            $('input[id=ELM_CL]').val($.trim(data.cl));
            $('input[id=ELM_ML]').val($.trim(data.ml));
            $('input[id=ELM_OT]').val($.trim(data.ot));
        },
        error: function() {                        
        }
    });

我建议将async设置为true，否则当服务器响应时，您的浏览器会冻结。使用Json的优点是您可以添加其他数据或更改顺序，而不会破坏您的Javascript代码。

- user1864610

---

谢谢，但我仍然在努力克服这个问题。 - Sudarshan

Answer 3

众所周知，帮助别人学习编程最好的方法就是给他们提供示例。以下是我的一部分内容。

PHP文件和响应

<?php

require_once('../../../wp-load.php');

$cs_confID = $_POST['cs_confID'];

$cs_date = $_POST['cs_date'];

$cs_obj = get_conf_id_for_insert($cs_date, $cs_confID);

$json_cs = array();    

if(count($cs_obj) == 1)    
{
    $json_cs = array('cs_id'=>$cs_obj[0]->cs_id,'cs_date'=>$cs_obj[0]->cs_date); //Make array of files    
    echo json_encode($json_cs); //Encode json    
}    

else    
{    
    echo '<p style="color:red">Status:Error. Please contact our support for further help!</p>';    
}
?>

HTML和JQuery

$.ajax({ url: '../wp-content/themes/rirads-2012-child-theme/insert_conference_schedules.php',

data: {cs_date:$("#c_date").val(),cs_confID: $("#conf").val()},
beforeSend: function(){ $("#loaderAjax").show(); },
type: 'post',
success: function(output) 
{
$("#loaderAjax").hide();
var obj = jQuery.parseJSON(output); //decode JSON response

$("#cs_id").val(obj.cs_id); //Fill the value of current cs_id into input field cs_id

$("#cs_date").val(obj.cs_date); //Fill the value of current cs_date into input field cs_date

//code goes on...

希望这能对您有所帮助.. :)

- Matija

Answer 4

我假设您想将值设置为表单输入？在这种情况下，用以下内容替换您的成功代码：

 success: function(cl,ml,ot) { alert(cl,ml,ot);
       $('input[id=ELM_CL]').val($.trim(cl));
       $('input[id=ELM_ML]').val($.trim(ml));
       $('input[id=ELM_OT]').val($.trim(ot));
  },

你把所有字段都设置成了相同的 cl 值。

- JanR