jQuery Ajax实例

最新推荐文章于 2020-09-09 19:28:34 发布

Surin被占用了

最新推荐文章于 2020-09-09 19:28:34 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/xsl_1126571587/article/details/41283521

版权

浏览器页面输入姓名，通过get/post请求，返回字符串显示在浏览器页面

<!DOCTYPE html>
<html>
<head>
    <title>JQueryWithAjax.html</title>
   <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
   <script>
       function changeByGet(){
               $.get(createQuery(),
                   function(data,status){
                       $("#getMess").text(data);
                   }
               );
       }
       function createQuery(){
           var firstName = $("#firstName").val();
            var lastName = $("#lastName").val();
            var queryString = "/AjaxTest/GetAndPostExample?firstName=" + firstName + "&lastName=" + lastName;
            return queryString;
       }

       function changeByPost(){
           $.post("/AjaxTest/GetAndPostExample",
               {
                   firstName:$("#firstName").val(),
                   lastName:$("#lastName").val()
               },
               function(data,status){
                       $("#getMess").text(data);
                   }
           );
       }
   </script>
</head>

<body>
   <table>
        <tbody>
            <tr>
                <td>First name:</td>
                <td><input type="text" id="firstName"/>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><input type="text" id="lastName"/>
            </tr>
        </tbody>
    </table>
    <button id="btn1" οnclick="changeByGet()">get提交</button>
    <button id="btn2" οnclick="changeByPost()">post提交</button>
    <p>返回的信息：</p>
    <div id="getMess"></div>
</body>
</html>

//

package com.haiyi;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class GetAndPostExample extends HttpServlet {

    protected void processRequest(HttpServletRequest request,
            HttpServletResponse response, String method)
            throws ServletException, IOException {
                //把响应内容类型设置为 text/html
                response.setContentType("text/html,charset=utf-8");
                //得到用户参数值
                String firstName = request.getParameter("firstName");
                String middleName = request.getParameter("lastName");
               //生成包含用户参数值的返回字符串
                String responseText = "Hello " + firstName + " " + middleName
                 + "." ;
                System.out.println(responseText);
                //写回浏览器
                PrintWriter out = response.getWriter();
                out.println(responseText);
                out.close();
            }
            protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
                //Get主函数调用processRequest,完成Get方法的参数接受，返回的过程
                processRequest(request, response, "GET");
            }
            protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
                //POST主函数调用processRequest,完成POST方法的参数接受，返回的过程
                processRequest(request, response, "POST");
            }
}