如何在JSP中使用ajax在两个不同的文本框中显示两个值

问题描述：

我有3个页面，当我在文本框中输入名称时我想这样做。电子邮件和电话使用ajax显示在不同的文本框中。它在1个文本框中显示两个值，但我希望在两个不同的文本框中使用这两个值。如何在JSP中使用ajax在两个不同的文本框中显示两个值

HTML 这是我的html页面：

<%-- 
    Document : Test 
    Created on : Oct 10, 2017, 9:59:46 PM 
    Author  : Lenovo 
--%> 

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="Bootstrap/bootstrap.css"/> 
     <title>JSP Page</title> 


    </head> 
    <body> 

     <form action="NameDB.jsp" method="post" name="add_name" id="add_name"> 
     <table class="table table-bordered" border="1" id="dynamic_field"> 
     <tr> 
     <th>Enter Name</th> 
     <th>Enter email</th> 
     </tr>  

     <tr> 
     <td><input type="text" name="name_1" placeholder="Enter Name" size="25" class="searchName" id="search1"/></td> 
     <td><input type="text" name="email_1" id="esearch1"/></td> 
     <td><input type="text" name="phone_1" id="psearch1"/></td> 
     <td> 
     <button type="button" name="add" id="add">Add More</button>  
     </td> 
     </tr> 


     </table>  
     <input type="submit" name="submit" value="Submit"/>  
     </form>

JQuery的 这是我的Jquery和Ajax

/* 
* To change this license header, choose License Headers in Project Properties. 
* To change this template file, choose Tools | Templates 
* and open the template in the editor. 
*/ 

$(document).ready(function() 
{ 
    var i=1; 
    $('#add').click(function() 
    { 
    i++; 
    $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" id="search'+i+'" class="searchName" name="name_'+i+'" placeholder="Enter Name"/></td>\n\ 
    <td><input type="text" id="esearch'+i+'" class="searchEmail" name="email_'+i+'"/></td>\n\ 
    <td><input type="text" id="psearch'+i+'" class="searchPhone" name="phone_'+i+'" placeholder="Enter Phone"/></td>\n\ 
    <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>\n\ 
    <td><input type="hidden" name="count" value="'+i+'"/></td></tr>'); 

    }); 


    $(document).on('click','.btn_remove',function() 
    { 
     var button_id=$(this).attr("id"); 
     $('#row'+button_id+'').remove(); 

    }); 

    $(document).on('change','.searchName',function() 
    { 
     var id=$(this).attr("id"); 
     var name=$('#'+id).val(); 
     //var email=$('#e'+id).val(); 

    $.ajax({ 
     url:"AjaxDB.jsp", 
     type:"post", 
     dataType:"text", 
     data:{name:name}, 
     cache:false, 
     success:function(data) 
     { 

     //$('#show').html(data); 
     $('#e'+id).val(data); 
     } 
     }); 
     }); 

    });

AjaxDB.JSP

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page language="java"%> 
<%@page import="java.sql.*"%> 
<%@page import="java.util.*"%> 
     <% 
     try 
     { 
      String name=request.getParameter("name"); 
      String email=null; 
      String phone=null; 
      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/atm","root","root"); 
      Statement st=con.createStatement(); 
      ResultSet rs;   
      rs=st.executeQuery("SELECT * FROM test where name='"+name+"'"); 
      while(rs.next()) 
      { 
       email=rs.getString("email"); 
       phone=rs.getString("phone"); 

       out.print(email); 
       out.print(phone); 


      }   
     } 
     catch(Exception e) 
     { 
      System.out.println(e); 
     } 
     %>

答

如果你想从服务器接收数据，那么建议使用JSON。您从“AjaxDB.JSP”以纯文本格式发送数据
如果响应是使用JSON，那么您应该使用Servlet而不是JSP页面。两个以下几点都是通过代码解释：

你的servlet代码可能是以下几点：

import javax.servlet.http.*; 
import javax.servlet.*; 
import java.io.*; 
import org.json.simple.*; 

public class DemoServlet extends HttpServlet { 
    public void doGet(HttpServletRequest req,HttpServletResponse res) 
    throws ServletException,IOException 
    { 
     res.setContentType("application/json");//setting the content type 
     PrintWriter pw=res.getWriter();//get the stream to write the data 
     JSONObject response = new JSONObject(); 
     try { 
      String name=request.getParameter("name"); 
      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/atm","root","root"); 
      Statement st=con.createStatement(); 
      ResultSet rs;   
      rs=st.executeQuery("SELECT * FROM test where name='"+name+"'"); 
      JSONArray list = new JSONArray(); 
      while(rs.next()) { 
       JSONObject obj = new JSONObject(); 
       obj.put("email",rs.getString("email")); 
       obj.put("email",rs.getString("phone")); 
       list.add(obj); 
      } 
      response.put("response", list); 
     } catch(Exception e) { 
      System.out.println(e); 
     } 
     pw.println(response.toJSONString()); 
     pw.close();//closing the stream 
    } 
}

和你的客户端代码可以如下：

$.ajax({ 
    url:"AjaxDB.jsp", 
    type:"post", 
    dataType:"json", 
    data:{name:name}, 
    cache:false, 
    success:function(data) { 
      console.log(data); 
      console.log(data.response[0].email); 
      console.log(data.response[0].phone); 
     } 
    }); 
});

特别提示：代码未经测试。所以如果发现错误，请进行调试

如何在JSP中使用ajax在两个不同的文本框中显示两个值

相关推荐