Question

我基本上要做的是从用户读取ID，使用AJAX将其传递给servlet，然后从数据库中获取相应的书名和课程，然后在各自的文本框中显示它们。 AJAX对我来说就像火箭科学，我刚从一些基本的在线教程开始。这是我写的代码：

JSP代码：

<body>
Edit book details:</br>
Enter Book Id: <input type="text" id="tb1" onkeyup="get(this.value)"/></br>
Book name is: <input type="text" id="tb2"/></br>
Course is: <input type="text" id="tb3"/></br>
</body>

JS代码：

    <script>

    function get(str)
    {
        var xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              document.getElementById("tb2").value=xmlhttp.responseText;
              document.getElementById("tb3").value=xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","Demo?q="+str,true);
        xmlhttp.send();

    }

    </script>

Servlet代码：

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String str=request.getParameter("q");

        String book,course;
        try
        {
                Class.forName("com.mysql.jdbc.Driver");
                Connection con=DriverManager.getConnection(url,user,pass);
                PreparedStatement ps=con.prepareStatement("select  bname,course from product where pid=?");
                ps.setString(1,str);
                ResultSet rs=ps.executeQuery();
                if(rs.next())
                {
                    book=rs.getString(1);
                    course=rs.getString(2);
                }
                else
                {
                    book="";
                    course="";
                }
                response.getWriter().write(book);
                response.getWriter().write(course);

        }
        catch(Exception e)
        {

            e.printStackTrace();
        }

    }

问题是结果都显示在同一个文本框中（上部屏幕截图），我希望它像下面的那样。

是的，我知道问题在于我正在撰写document.getElementById("tb2").value=xmlhttp.responseText; document.getElementById("tb3").value=xmlhttp.responseText;

这就是我要问的问题，如何根据要求过滤responseText？ screenshot

Answer 1

使用我建议的字符串拆分方法。

在你的servlet中（逗号可以被你想要的替换）：

response.getWriter().write(book+","+course);

当然，这假设您已将逗号保留用作分隔符，并且您的可变性book或course中无法使用逗号。

在你的javascript中：

var responseArray = xmlhttp.responseText.split(",");
var book   = responseArray[0];
var course = responseArray[1];

在servlet中使用JSON（最简单）：

response.getWriter().write("{ book:'"+book+"', course:'"+course+"'}");

你当然可以使用java json库来做得更好。如果您的变量book和course使用了字符'，"＆＃34;，{或}，例如，你需要对它们进行编码，否则会破坏Json。例如，请参阅https://code.google.com/p/json-simple/wiki/EncodingExamples

在你的javascript中：

var jsonObj = JSON.parse(xmlhttp.responseText);
var book   = jsonObj.book;
var course = jsonObj.course;

Answer 2

看起来你的实际问题是你想在一个AJAX响应中传递两个字符串（书名和课程），但你不知道如何在JavaScript代码中分隔它们。

如果是，the answer is to use the .split() method，例如像这样：

// assumes that the strings are separated by line breaks ("\n")
var lines = xmlhttp.responseText.split("\n");
document.getElementById("tb2").value = lines[0];
document.getElementById("tb3").value = lines[1];

当然，为了实现这一点，在Servlet中，您需要确保两个字符串实际上由换行符分隔，方法是在它们之间明确地写"\n"或使用.writeln()。您还需要确保没有任何字符串本身甚至可以包含换行符;对于你的数据，这似乎很可能，但无论如何你应该检查它。

如果您希望从Servlet传回更复杂的数据，则标准格式为JSON。在您的Servlet中，您可以使用JSON.simple之类的库将数据编码为JSON，而在JavaScript中，至少在现代浏览器中，您可以使用built-in JSON parser，例如jQuery。像这样：

// assumes that the response is JSON, e.g.:
// { book: "English", course: "6th standard" }
var data = JSON.parse( xmlhttp.responseText );
document.getElementById("tb2").value = data.book;
document.getElementById("tb3").value = data.course;

除了传输更复杂的数据结构之外，使用JSON的主要优点是，如果使用适当的JSON库来生成它，则可以传递任意字符串，而不必担心它们是否包含换行符或不。

我还想提出更多建议。一个不是直接使用XMLHttpRequest，而是使用提供a more convenient interface的which I already made on meta.SE这样的库。使用jQuery，您的整个客户端代码（假设服务器返回JSON）可以简化为：

$('#tb1').on( 'keyup', function () {
   $.ajax( {
      url: 'Demo',                 // URL of Servlet
      data: { q: this.value },     // parameters to Servlet
      dataType: 'json',            // type of data to expect back

      success: function ( data ) {
          $('#tb2').val( data.book );
          $('#tb3').val( data.course );
      }
   } );
} );

或者，如果您的服务器返回纯文本，例如换行符分隔符：

$('#tb1').on( 'keyup', function () {
   $.ajax( {
      url: 'Demo',
      data: { q: this.value },
      dataType: 'text',

      success: function ( text ) {
          var lines = text.split( "\n" );
          $('#tb2').val( lines[0] );
          $('#tb3').val( lines[1] );
      }
   } );
} );

请注意，此代码通过jQuery直接附加keyup处理程序（因为它被认为是好的样式），因此您不需要HTML中的onkeyup="get(this.value)"属性。它还修复了原始代码中的一堆错误，例如您忘记对q参数值进行URL编码的事实。

另一个建议{{3}}，你可能想要花一些时间学习走路（例如如何使用.split()和JSON），然后再尝试运行（例如编写Servlet以通过AJAX）。为此，几个小时的Java和JavaScript入门教程可能比Stack Overflow上的十几个问题更有用。

从servlet获取数据到jsp页面

2 个答案: