Ajax快速入門

AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，尤其是在一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

傳統(tǒng)Web開發(fā)
World Wide Web（簡稱Web）：是隨著Internet的普及使用而發(fā)展起來的一門技術(shù)，其開發(fā)模式是一種請求→刷新→響應(yīng)的模式，每個請求由單獨(dú)的一個頁面來顯示，發(fā)送一個請求就會重新獲取這個頁面。

!

驗(yàn)證用戶名是否注冊

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
        <title>$Title$</title>
        <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
      <script>
          $(function () {
              $('input[name=username]').blur(function () {
                  // 檢查用戶名是否可以被注冊，如果不可以，響應(yīng)失敗信息，否則響應(yīng)成功信息
                  // 發(fā)送ajax請求
                  if($('input[name=username]').val() != null && $('input[name=username]').val().trim() != ''){
                      $.ajax({
                          /*url指定接收請求的地址*/
                          url : "${pageContext.request.contextPath}/checkUsername",
                          /*data填寫發(fā)送的數(shù)據(jù)*/
                          data : {
                              "name" :  $('input[name=username]').val()
                          },
                          // type指定請求類型
                          type : "get",
                          // dataType指定響應(yīng)信息格式
                          dataType : "json",
                          // 指定成功的回調(diào)函數(shù),res是響應(yīng)回來的信息
                          success : function (res) {
                              if(res == 0){
                                  $('#msg').html("注冊失敗").css('color','red');
                                  $('button').attr('disabled','disabled');
                              }else{
                                  $('#msg').html("注冊成功").css('color','green');
                                  $('button').removeAttr('disabled');
                              }
                          },
                          // 指定失敗的回調(diào)函數(shù)
                          error : function(){
                              alert("服務(wù)響應(yīng)失敗");
                          },
                          // 異步請求
                          async : true
                      })
                  }

              })
          })
      </script>
  </head>
  <body>
    <h1>Reg Page</h1>
    <form action="${pageContext.request.contextPath}/reg" method="post">
        <input type="text" name="username" placeholder="用戶名"><span id="msg"></span><br><br>
        <input type="password" name="password" placeholder="密碼">
        <button>注冊</button>
    </form>
  </body>
</html>

CheckUsernameServlet.java

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

@WebServlet(name = "CheckUsernameServlet",urlPatterns = "/checkUsername")
public class CheckUsernameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 獲取請求參數(shù)
        String name = request.getParameter("name");
        // 調(diào)dao查詢該用戶名是否存在
        if("mike".equals(name)){
            // 失敗
            response.getWriter().println(0);
        }else{
            response.getWriter().println(1);
        }
    }
}

根據(jù)id查詢用戶和查詢?nèi)坑脩?/h1>

把對象序列化成字符串，需要使用jackson或fastjson，可以自己到maven庫下載
serch.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            $('#serch1').click(function () {
                $.ajax({
                    url : "${pageContext.request.contextPath}/serchById",
                    data:{
                        "userid" : $('#userid').val()
                    },
                    type : 'get',
                    dataType : 'json',// 解析json字符串
                    success : function (res) {
                        $('#box').html(res.id+","+res.name+","+res.sex+","+res.age)
                    },
                    error : function () {
                        alert("響應(yīng)失敗")
                    },
                    async : true
                })
            })

            $('#serch2').click(function () {
                $.ajax({
                    url : "${pageContext.request.contextPath}/serchAll",
                    data:{},
                    type : 'get',
                    dataType : 'json',// 解析json字符串
                    success : function (res) {
                        $('#box').html('');
                        for(i in res){
                            $('#box').append(res[i].name+","+res[i].age+"<br>")
                        }
                    },
                    error : function () {
                        alert("響應(yīng)失敗")
                    },
                    async : true
                })
            })

        })
    </script>
</head>
<body>
    <h1>Serch Page</h1>
    <p>
        <input type="text" id="userid">
        <button type="button" id="serch1">查詢</button>
        <button type="button" id="serch2">查詢?nèi)?lt;/button>
    </p>
    <div id="box"></div>
</body>
</html>

SerchByIdServlet.java

import com.alibaba.fastjson.JSON;
import com.neuedu.pojo.Userinfo;

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

@WebServlet(name = "SerchByIdServlet",urlPatterns = "/serchById")
public class SerchByIdServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 獲取請求參數(shù)
        String userid = request.getParameter("userid");
        // 調(diào)dao層查詢該id員工所有信息
        Userinfo userinfo = new Userinfo();
        userinfo.setId(Integer.parseInt(userid));
        userinfo.setAge(30);
        userinfo.setName("leo");
        userinfo.setSex("男");
        // 響應(yīng)ajax請求
        //  JSON.toJSONString會把對象序列化成json字符串
        String str = JSON.toJSONString(userinfo);
        System.out.println(str);
        response.getWriter().println(str);
    }
}

SerchAllServlet.java

import com.alibaba.fastjson.JSON;
import com.neuedu.pojo.Userinfo;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "SerchAllServlet",urlPatterns = "/serchAll")
public class SerchAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Userinfo userinfo1 = new Userinfo();
        userinfo1.setId(1001);
        userinfo1.setName("tom");
        userinfo1.setSex("man");
        userinfo1.setAge(30);
        Userinfo userinfo2 = new Userinfo();
        userinfo2.setId(1002);
        userinfo2.setName("lucy");
        userinfo2.setSex("girl");
        userinfo2.setAge(33);
        Userinfo userinfo3 = new Userinfo();
        userinfo3.setId(1003);
        userinfo3.setName("lilei");
        userinfo3.setSex("man");
        userinfo3.setAge(20);

        List<Userinfo> list = new ArrayList<>();
        list.add(userinfo1);
        list.add(userinfo2);
        list.add(userinfo3);
        String str = JSON.toJSONString(list);
        System.out.println(str);
        response.getWriter().println(str);
    }
}

ajax簡化寫法

        <script>
            $(function () {
                $('#reg').click(function () {
                    $.post(
                            "${pageContext.request.contextPath}/user/reg",
                            {
                                "username": $('input[name=username]').val(),
                                "password":$('input[name=password]').val()
                            },
                            function success(res) {
                                if(res == 0){
                                    $('#msg').html("注冊失敗").css('color','red');
                                }else{
                                    window.location.href = "${ pageContext.request.contextPath }/gologin";
                                }
                            },
                            "json"
                    );
                })
            })
        </script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容