[英]How to retrieve multiple values from servlet in jsp using AJAX
我有這個ajax
javascript代碼,該代碼調用servlet
來檢索兩個值(名字,電話)。 我知道如何從servlet獲取單個值而不是多個值。
這是我的ajax
<script>
function getCustomerDetailsAjax(str) {
str = $('#customerId').val();
if (document.getElementById('customerId').value <= 0) {
document.getElementById('firstName').value = " ";
document.getElementById('telephone').value = " ";
document.getElementById('vehicleMake').value = " ";
document.getElementById('vehicleModel').value = " ";
document.getElementById('vehicleColor').value = " ";
} else {
$.ajax({
url: "GetCustomerDetails",
type: 'POST',
data: {customerId: str},
success: function (data) {
alert(data); //I want to get 2 servlet values and alert them here. How can I do that?
}
});
}
}
</script>
這是我的servlet
public class GetCustomerDetails extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
int customerId = Integer.valueOf(request.getParameter("customerId"));
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/Vehicle", "root", "");
PreparedStatement ps = con.prepareStatement("SELECT fistname,telephone FROM customers WHERE customerid=?");
ps.setInt(1, customerId);
ResultSet result=ps.executeQuery();
if(result.next()){
out.print(result.getString("firstname")); //I want to send this value
out.print(result.getString("telephone")); //and this value
}
} catch (ClassNotFoundException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
}
}
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
這是從servlet
檢索數據的部分,如何從中獲取多個值並發出警報?
success: function (data) {
alert(data); //I want to get 2 servlet values and alert them here. How can I do that?
}
謝謝!
要在Web服務和客戶端之間共享數據,您必須選擇最適合您的需求的協議/策略(XML,JSON ...)。
由於您使用的是JavaScript,因此我建議您閱讀有關JSON(代表“ JavaScript對象表示法”)的信息。
在您的示例中,您應該生成並返回一個JSON字符串(帶有正確的Content-type標頭)-您可以閱讀有關javax.json
包的信息。 使用JSON,您可以返回帶有所選字段的數據結構。
像這樣(未經測試-自從我編寫Java以來已經很久了):
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
int customerId = Integer.valueOf(request.getParameter("customerId"));
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/Vehicle", "root", "");
PreparedStatement ps = con.prepareStatement("SELECT fistname,telephone FROM customers WHERE customerid=?");
ps.setInt(1, customerId);
ResultSet result=ps.executeQuery();
if(result.next()){
/* set response content type header: jQuery parses automatically response into a javascript object */
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
/* construct your json */
JsonObject jsonResponse = new JsonObject();
jsonResponse.put("firstname", result.getString("firstname"));
jsonResponse.put("telephone", result.getString("telephone"));
/* send to the client the JSON string */
response.getWriter().write(jsonResponse.toString());
// "{"firstname":"first name from db","telephone":"telephone from db"}"
}
} catch (ClassNotFoundException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
}
}
在您的JS中(由於success
回調,我想您正在使用jQuery):
success: function (data) {
/* because you set the content-type header as 'application/json', you'll receive an already parsed javascript object - don't need to use JSON.parse. */
console.log(data);
/*
{
firstname: "first name from db",
telephone: "telephone from db"
}
*/
alert(data.firstname); //alert firstname
alert(data.telephone); //alert phone
}
是的,您可以使用JSON來做到這一點,正如前面的回答已經說明的那樣,但是我想補充一點,因為您正在使用jquery,所以可以做一些事情來進一步簡化代碼。
<script>
function getCustomerDetailsAjax(str) {
str = $('#customerId').val();
if (str <= 0) {
$('#firstName').val(" ");
$('#telephone').val(" ");
$('#vehicleMake').val(" ");
$('#vehicleModel').val(" ");
$('#vehicleColor').val(" ");
$('#firstName').val(" ");
} else {
//with jquery you can do this, which is much easier.
var params = {customerId: str}; //set paramaters
$.post("GetCustomerDetails", $.param(params), function(responseJson) {
//handle response
var firstname = responseJson.firstname;
var telephone = responseJson.telephone;
//now do whatever you want with your variables
});
}
}
</script>
此外,此處有一些更改:
public class GetCustomerDetails extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
int customerId = Integer.valueOf(request.getParameter("customerId"));
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/Vehicle", "root", "");
PreparedStatement ps = con.prepareStatement("SELECT fistname,telephone FROM customers WHERE customerid=?");
ps.setInt(1, customerId);
ResultSet result=ps.executeQuery();
if(result.next()){
String firstname = result.getString(1); //firstname
String telephone = result.getString(2); //telephone
JsonObject jsonResponse = new JsonObject();
jsonResponse.put("firstname", firstname);
jsonResponse.put("telephone", telephone);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonResponse.toString());
}
} catch (ClassNotFoundException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
} catch (SQLException ex) {
Logger.getLogger(GetCustomerDetails.class.getName()).log(Level.SEVERE, null, ex);
}
}
還有其他方法可以將值從servlet發送到jsp / html頁面。 我強烈建議在此處查看BalusC的答案,該答案對如何使用Servlet和Ajax很有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.