標籤：open ack 瀏覽器 serialize jquery title ajax ica state
首先我們來看一波js的原聲ajax。
我們先準備好servlet,之後不會改動，所以先看一波。
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就可以了。這裡就不做概述了。
當然除了$.ajax jQuery還提供了$.get()，$.post(),$(select).load等方法。以上方法用法和$.ajax()文法並沒有不同，是對$.ajax()的封裝，但是$.ajax()更靈活，通常使用$.ajax()可以完成我們的開發。所以你懂得。
使用jQuery發送ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
