Question

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

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);
        }
        %>

Answer 1

如果要从服务器接收数据，建议使用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在两个不同的文本框中显示两个值

1 个答案: