Ajax結果打印[object HTMLInputElement]

Question

我想使用ajax接收數據。但是當使用這個代碼時，結果會打印出[對象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

試試這個更新。在阿賈克斯，成功塊：

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("}");