jQuery ajax 与服务器交互方法

Posted 2020-08-24

1.html

<table>
    <tr>
        <td>用户名：</td>
        <td><input type="text" name="username" id="name"></td>
    </tr>
    <tr>
        <td>密&emsp;码：</td>
        <td><input type="password" name="password" id="password"></td>
    </tr>
    <tr>

        <td rowspan="2"><button id="but">提交</button></td>
    </tr>
</table>
   <span id="show"></span>

2.javascript

$(function () {
   $("#but").click(function () {
       var name=$(‘#name‘).val();
       var password=$(‘#password‘).val();
       var url="LoginServlet";

       //ajax  post方法
      /* $.post(url,{username:name,password:password},function () {
           $(‘#show‘).text("success");
       });*/
       //ajax ajax方法
     /* $.ajax({
          type:"post",
          url:url,
          data:{username:name,password:password},
          success:function () {
              $(‘#show‘).text("登录成功");
          },
          error:function () {
              $(‘#show‘).text("登录失败");
          },
      });*/
      //ajax get方法
       $.get(url,{username:name,password:password},function (data) {
           $(‘#show‘).text(data);
       });

   }) ;
});

Java代码：

protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
       String name=request.getParameter("username");//获得用户名
       String password=request.getParameter("password");//获得密码
       String success="登录成功收到数据";
       if(name.equals("admin")&password.equals("admin")){//判断
           System.out.println("登录成功");
          
       }else {
           System.out.println("密码或用户名不正确");
       }
}

运行结果图：
控制台运行结果：

html页面结果
：