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("注册成功");});} 作为初学者，多有指教。
)
