0
3ページありますが、テキストボックスに名前を入力するとします。 ajaxを使用して、さまざまなテキストボックスに電子メールと電話を表示します。 1つのテキストボックスに両方の値が表示されますが、2つの異なるテキストボックスに両方の値が必要です。JSPでajaxを使用して2つの異なるテキストボックスに2つの値を表示する方法
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);
}
%>