Ajax的Jsonp跨域請求技術
阿新 • • 發佈：2022-06-01
Ajax的跨域請求
跨域獲取使用者寫入資料
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="http://localhost:8060/JSON_war_exploded/jquery.min.js"></script> <script> function funmove(){ //id的屬性用$("#id")獲取 //判斷她為空的話，給span一個文字發生 if (null== $("#userid").val()||''==$("#userid").val()){ $("#spanid").text("使用者名稱不能為空") return } //這裡是使用者看到後進行輸入，再次執行清空sqan的操作；就不執行if了 $("#spanid").text("") //傳送非同步請求 $.ajax( { type:"GET",//method的方式 url:"http://localhost:8060/JSON_war_exploded/unameCheckServlet.do?",// 請求的後臺服務的路徑 data:{username:$("#userid").val()},// 提交的引數 dataType:"jsonp", jsonp:"aaa", success:function (msg) {// 響應成功執行的函式 $("#spanid").text(msg) } } ) } </script> </head> <body> <form method="get" action="unameCheckServlet.do"> 賬號：<input id="userid" name="username" type="text" onblur="funmove()"> <span id="spanid" style="color: red"></span><br/> 密碼：<input name="password" type="password"><br/> <input type="submit" value="提交"> </form> </body> </html>
package com.msb; import com.sun.net.httpserver.HttpServer; 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("/unameCheckServlet.do") public class servlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String parameter = req.getParameter("username"); System.out.println(parameter);//獲取使用者輸入的資料 String aaa = req.getParameter("aaa");//jsonp的跨域技術；aaa必須與定義的屬性名一致 String info= ""; if (parameter==null||parameter==""){ info="使用者名稱不能為空"; }else if ("msb".equals(parameter)){ info="使用者名稱已經被用"; } resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=UTF-8"); resp.getWriter().println(aaa+"('"+info+"')"); } }