使用jQuery發送ajax

時間 2020-04-08

標籤使用 jquery 發送 ajax 欄目 JQuery 简体版

原文原文鏈接

首先咱們來看一波js的原聲ajax。javascript

咱們先準備好servlet,以後不會改動，因此先看一波。html

package cn.curry.servlet;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;

import javax.servlet.ServletException;
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;

/**
 * Created by zl on 2017/3/18.
 */
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name=request.getParameter("name");
        if("admin".equals(name)){
            //打回瀏覽器  「已經註冊」
            response.getWriter().write("Your Account Is Already Registered");
        }
        else{
            //能夠註冊
            response.getWriter().write("You Can Register This Account");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}
很簡單的servlet頁面，而後咱們看前臺jsp展現頁面，我寫的是發送post，請求。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>註冊</title>
 <script type="text/javascript">
 function checkUser(){
 var value=document.getElementById("username").value;

 var url="RegisterServlet"; var xhr; if(window.XMLHttpRequest){ //非IE瀏覽器 Chrome 等 xhr=new XMLHttpRequest(); }else{ //IE xhr=new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open('post',url,true); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var content=xhr.responseText; document.getElementById("msg").innerText=content; } } xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xhr.send("name="+value); } </script> </head> <body> <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/> <input name="userpwd"/> </body> </html>
簡單改一下就能夠實現發送get請求。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>註冊</title>
    <script type="text/javascript">
        function checkUser(){
            var value=document.getElementById("username").value;
            var url="RegisterServlet?name="+value;
            var xhr;
            if(window.XMLHttpRequest){
                //非IE瀏覽器 Chrome 等
                xhr=new XMLHttpRequest();
            }else{
                //IE
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open('get',url,true);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    var content=xhr.responseText;
                    document.getElementById("msg").innerText=content;
                }
            }
          
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>
接下來看jQuery的，簡單了不少。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>註冊</title>
    <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
    <script type="text/javascript">
        function checkUser() {
            var value=document.getElementById("username").value;
            $.ajax({
                url : "RegisterServlet",
                type : "GET",
                data : "name="+value,
                dataType : "text",
                success : function(result){
                    document.getElementById("msg").innerText=result;
                },
                error:function () {
                    document.getElementById("msg").innerText=result;
                }
            });
        }
    </script>
</head>
<body>
    <input id="username" name="username" onblur="checkUser()"/><span id="msg"></span><br/>
    <input name="userpwd"/>
</body>
</html>

發送post請求直接把get改成post就能夠了。這裏就不作概述了。java

固然除了$.ajax jQuery還提供了$.get()，$.post(),$(select).load等方法。以上方法用法和$.ajax()語法並無不一樣，是對$.ajax()的封裝，可是$.ajax()更靈活，一般使用$.ajax()能夠完成咱們的開發。因此你懂得。ajax