如何从 mysql 数据库中获取值并使用 jquery ajax 将数据附加到 textarea答案

【问题标题】：how to get the value from mysql database and append the data to the textarea using jquery ajax如何从 mysql 数据库中获取值并使用 jquery ajax 将数据附加到 textarea
【发布时间】：2015-03-27 06:43:30
【问题描述】：

我在 jsp 中编写了一个程序来获取 5 个字段（姓名、年龄、电子邮件、电话、文本）的值，其中我的参数将是姓名本身

上面的jdbc代码：

public List getUserDetailsByName(String user_name) {
    List<String> list = new ArrayList<String>();
    try {
        prep = (PreparedStatement) connection
                .prepareStatement("Select user_name , user_age , mobile_no , 
                 email_id , ck_text from user_details where user_name='"
                        + user_name + "'");
        rSet = prep.executeQuery();
        while (rSet.next()) {
            String name = rSet.getString(1);
            String age = rSet.getString(2);
            String email_id = rSet.getString(3);
            String mobile_no = rSet.getString(4);
            String ck_text = rSet.getString(5);
            list.add(name);
            list.add(age);
            list.add(email_id);
            list.add(mobile_no);
            list.add(ck_text);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return list;
}

jsp代码：userdetails_json.jsp

<%
JSONObject obj = new JSONObject();
JSONObject finalJSON = new JSONObject();
Sql_Server details = new Sql_Server();
request.setCharacterEncoding("utf8");
String user_name = request.getParameter("user_name");
response.setContentType("application/json");
List<String> list = details.getUserDetailsByName(user_name);
int recordCounter = 1;
JSONArray jArray = new JSONArray();
for (int i = 0; i < list.size(); i++) {
    JSONObject formDetailsJson = new JSONObject();
    formDetailsJson.put("name", list.get(i));
    formDetailsJson.put("age", list.get(++i));
    formDetailsJson.put("phone", list.get(++i));
    formDetailsJson.put("email", list.get(++i));
    formDetailsJson.put("ck_text", list.get(++i));
    finalJSON.put(recordCounter, formDetailsJson);
    ++recordCounter;
}

out.print(finalJSON.toString());

当我在 url 中插入参数时，如 ?user_name="arjun" ，我得到 json 视图

{
 1: {
 phone: "123456789",
 email: "abc@gmail.com",
 age: "20",
 name: "arjun",
 ck_text: "<html> <head> <title></title> </head> <body>india lose 9th    
 wicket.</body> </html> "
   }
}

现在我在 html 页面中有一个列表视图，其中包含四个参数 name 、 age 、 email 、 phone ，我通过上面的 jsp 代码得到了这些参数

<script type="text/javascript">
    $(document).ready(function() {
         $.ajax({ 
                type: 'GET', 
                url: 
           'http://localhost:8082/JqueryForm/html/jsp/userdetails_json.jsp', 
                data: { get_param: 'value' }, 
                dataType: 'json',
                success: function (data) { 
                    $.each(data, function(i) {
                        var name = data[i].name;
                        var age = data[i].age;
                        var email = data[i].email;
                        var phone = data[i].phone;
                        console.log("name:" + name);
                        console.log("age:" + age);
                        console.log("email:" + email);
                        console.log("phone:" + phone);
                        var tr = $('<tr/>');
                        tr.append("<td><a href='user_details.html' 
                                 id='name'>" + name + "</a></td>");
                        tr.append("<td>" + age + "</td>");
                        tr.append("<td>" + email + "</td>");
                        tr.append("<td>" + phone + "</td>");
                        $("#table").append(tr); 
                    });
                }
            });


    });

我在表格中查看的记录列表如下所示

姓名年龄电子邮件电话

arjun 25 abc@gmail.com 123456789

巴拉特 31 xyz@gmail.com 456789012

现在我想做的是，我将名称设为 href ，所以当我点击 arjun 或 bharat 时，将打开一个新页面，其中我有 4 个文本区域来显示特定名称的详细信息，如果我点击在 arjun 上，我的新页面应该只有我想要但不显示的 arjun 的详细信息。我已经尝试在 jquery 中编写一些代码，但我知道我在某个地方出错了，所以需要一些帮助

$(document).ready(function() {
$("#name").click(function() {
    var inputElem = $('#user_details :input[name="name"]');
    var username = inputElem.val();
    console.log("Param Value:"+user_name);
    $.ajax({
        type : 'GET',
        url : 
        'http://localhost:8082/JqueryForm/html/jsp/userdetails_json.jsp',
        data : {
            user_name : username
        },
        dataType : 'json',
        success : function(data) {
            $.each(data, function(i) {
                var name = data[i].name;
                var age = data[i].age;
                var email = data[i].email;
                var phone = data[i].phone;
                console.log("name:" + name);
                console.log("age:" + age);
                console.log("email:" + email);
                console.log("phone:" + phone);
            });
        }
    });

});

});

【问题讨论】：

标签： jquery mysql jsp

【解决方案1】：

像这样更改您的第一个 Ajax 请求，

<script type="text/javascript">
    $(document).ready(function() {
         $.ajax({ 
            type: 'GET', 
            url: 'http://localhost:8082/JqueryForm/html/jsp/userdetails_json.jsp', 
            data: { get_param: 'value' }, 
            dataType: 'json',
            success: function (data) { 
                $.each(data, function(i) {
                    var name = data[i].name;
                    var age = data[i].age;
                    var email = data[i].email;
                    var phone = data[i].phone;
                    console.log("name:" + name);
                    console.log("age:" + age);
                    console.log("email:" + email);
                    console.log("phone:" + phone);
                    var tr = $('<tr/>');
                    tr.append("<td><a href='#' class='username' data-name='" + name + "' data-age='" + age + "' data-email='" + email + "' data-phone='" + phone + "'>" + name + "</a></td>");
                    tr.append("<td>" + age + "</td>");
                    tr.append("<td>" + email + "</td>");
                    tr.append("<td>" + phone + "</td>");
                    $("#table").append(tr); 
                });
            }
        });

        // And right a `onclick` function for anchor tag with class `username`, like:
        $("#username").on('click', function() {
            var queryString = 'name='+ $(this).attr('data-name');
            queryString += '&age='+ $(this).attr('data-age');
            queryString += '&email='+ $(this).attr('data-email');
            queryString += '&phone='+ $(this).attr('data-phone');

            var secondWindow = window.open("user_details.jsp?"+ queryString, "userdetails", "");
            secondWindow.focus();
        });
    }); 
</script>

然后您可以根据请求在user_details.jsp 上显示这些字段，

<%
String name = request.getParameter("name");
String age = request.getParameter("age");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
%>

如果您想将user_details.jsp 保留为像user_details.html 这样的html 页面，请使用jQuery 的$.query() 函数来获取请求参数。

希望对你有帮助，谢谢。

【讨论】：

谢谢先生回复，我已经改成user_details.jsp，而不是user_details.html，但是先生，当我点击名字arjun时，user_details.html页面打不开
检查浏览器中的任何 JavaScript 错误，并检查一次编辑后的答案。