Ajax結果打印[對象HTMLInputElement]

Question

我想使用ajax接收數據。 但是，當使用此代碼時，結果將打印[object HTMLInputElement]。 我可以將對象更改為字符串嗎？

這是我在JSP中使用ajax的代碼。

$('select#product').change(function() {

        var param = "code=" + $('#product').val();

        $.ajax({
            url : 'add_products/add_products.jsp',
            contentType : "application/x-www-form-urlencoded; charset=UTF-8",
            data : param,
            type : 'POST',
            dataType : 'text',
            success : function(data, textStatus, jqXHR){
                $('#color').val(color);
                $('#price').val(price);
            }
        });
    });
...
<td>
    <input type="text" id="color" class="form-control" name="color"  />
</td>
<td>
    <input type="text" id="price" class="form-control" name="price" value="0"  />
</td>

而且這是add_products.jsp接收到的上級jsp。

product_code = request.getParameter("code");

try {
    query = "select * from new_product where product_code='"+product_code+"'";
    rs = stmt.executeQuery(query);
    while (rs.next()) {
        size = rs.getString("sizes");
        color = rs.getString("color");
        price = rs.getString("price_cny");

        out.println(color);
        out.println(price);

    }
} catch (SQLException e) {
    out.println(e);
} finally {
}

謝謝。

Answer 1

將您的服務器代碼更改為此...

product_code = request.getParameter("code");

try {
    query = "select * from new_product where product_code='"+product_code+"'";
    rs = stmt.executeQuery(query);
    while (rs.next()) {
        size = rs.getString("sizes");
        color = rs.getString("color");
        price = rs.getString("price_cny");

        out.println(color+"_"+price);                //concatenate 2 values

    }
} catch (SQLException e) {
    out.println(e);
} finally {
}

而您的客戶端代碼對此...

$('select#product').change(function() {

        var param = "code=" + $('#product').val();

        $.ajax({
            url : 'add_products/add_products.jsp',
            contentType : "application/x-www-form-urlencoded; charset=UTF-8",
            data : param,
            type : 'POST',
            dataType : 'text',
            success : function(data, textStatus, jqXHR){
                var values = data.split("_");       //get your 2 values seperated
                $('#color').val(values[0]);
                $('#price').val(values[1]);
            }
        });
    });

Answer 2

我從來沒有用JSP編寫過代碼，所以請客氣。 嘗試這個。 它基於此示例。 http://codesstore.blogspot.com/2011/12/json-with-jquery-jsp-servlets.html

基本上，您想找到一種返回json對象的方法。

阿賈克斯

$('select#product').change(function() {

  var param = "code=" + $('#product').val();

  $.ajax({
    url : 'add_products/add_products.jsp',
    contentType : "application/x-www-form-urlencoded; charset=UTF-8",
    data : param,
    type : 'POST',            
    success : function(data, textStatus, jqXHR){

      try {
        $result = $.parseJSON(data);
      }
      catch(error)
      {
        alert('Error parsing json ' + data);
      }

      alert(data.color);
      alert(data.price);

    }
  });
});

JSP

確保導入以獲取json支持。

import org.json.JSONObject;  
product_code = request.getParameter("code");

try {
    query = "select * from new_product where product_code='"+product_code+"'";
    rs = stmt.executeQuery(query);

    JSONObject json = new JSONObject();  

    while (rs.next()) {
        size = rs.getString("sizes");
        color = rs.getString("color");
        price = rs.getString("price_cny");

        json.put("color", color);  
        json.put("pr", price);  
    }

       out.println(json);
} catch (SQLException e) {
    out.println(e);
} finally {
}

Answer 3

試試這個更新。 在ajax中，成功塊：

success : function(data, textStatus, jqXHR){
     $('#color').val(data.color);
     $('#price').val(data.price);
}

add_products.jsp ：

在此行中，jsp的頂部。

<%@ page contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>

將jdbc結果輸出為：

out.print("{");
if (rs.next()) {//note, replaced with while loop
    out.print("\"sizes\":" + rs.getString("sizes") + ",");
    out.print("\"color\":" + rs.getString("color") + ",");
    out.print("\"price\":" + rs.getString("price_cny"));
}
out.print("}");