js實現jQuery請看
js實現jQuery
首先得要jQuery庫，里面要jQuery所有的版本提供選擇
http://www.jq22.com/jquery-info122
jQuery 相當于一個簡化js編程的輕量級的類庫。
jQuery代碼寫在JS的function里面以$符號開頭，里面有可以有function，有各種參數，還可以jQuery套jQuery，里面還可以快速的得到控件的值，如：$("#id").val(),根據id選擇器得到這個控件的值。

一，以$.ajax(),$.get(),$.post為例做異步刷新，demo是注冊驗證電話號碼

頁面

電話號碼：<input type="text" id = "mobile"/> <br/><button onclick = "register()">注冊</button><span id = "tip"></span>

后臺

protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 設置編碼req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");// 文本類型 resp.setContentType("text/html; charset=utf-8");String mobile = req.getParameter("mobile");System.out.println(mobile);PrintWriter out = resp.getWriter();if ("19999999999".equals(mobile)) {// 存在號碼out.write("true");} elseout.write("false");out.close();}

$.ajax()

// 導入標簽庫<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">function register() {var $mobile = $("#mobile").val();alert($mobile);$.ajax({url: "jsServlet",way: "post",data: "mobile=" + $mobile,success: function(result, testStatus) {if (result == "true")alert("注冊失敗，號碼存在。");else alert("注冊成功。");alert(testStatus); // success ,與服務器正常交互},error: function(xhr, errorMessage, e) {alert(e);}}); </script>

$post

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">function register() {var $mobile = $("#mobile").val();alert($mobile);$.post("jsServlet","mobile=" + $mobile,function (result) {if (result == "true")alert("注冊失敗，號碼存在。");else alert("注冊成功。");},"text");</script>

get/post語法總結

// $.get & $.post 兩種提交方式/*語法一樣$.get("url","commit data",function(result) {// result 是返回結果},"text" // 以哪種格式返回。);*/}

二，$("#id").load() 和 $.getJSON()兩個方法
$("#id").load()
頁面不變，后臺如下

PrintWriter out = resp.getWriter();String mobile = req.getParameter("mobile");System.out.println(mobile);// $("#id").load();if ("19999999999".equals(mobile)) {out.write("此號碼已存在");} else {out.write("注冊成功");} <script type="text/javascript"> function register() {// 莫忘記.val()var $mobile = $("#mobile").val();alert($mobile);// 把服務器返回的值加載到span里面$("#tip").load( "loadServlet","mobile=" + $mobile ); }</script>

$.getJSON()

//后臺代碼// $getJSON(); 要求返回json格式PrintWriter out = resp.getWriter();String mobile = req.getParameter("mobile");if ("19999999999".equals(mobile)) {out.write("{\"msg\": \"true\"}"); // "{\"msg\": \"true\"}"} else {out.write("{\"msg\": \"false\"}"); }

頁面變化的是響應數據為json格式了

function register() {// 莫忘記.val()var $mobile = $("#mobile").val();alert($mobile);$.getJSON("loadServlet",{"mobile": $mobile}, //json格式function(result) {if (result.msg == "true")alert("賬號已存在");elsealert("注冊成功");});}

作為初學者，多有指教。

總結

以上是生活随笔為你收集整理的jQuery 实现Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。