ajax请求方式

最新推荐文章于 2024-01-06 15:35:25 发布

原创最新推荐文章于 2024-01-06 15:35:25 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

最常用的ajax请求方法
//第一个参数是请求的地址，
// 第二个参数是传递的值，
// 第但三个参数是所设置的回调函数

  $.get("userServlet","name="+userName,callBack);//此方法开发中最常用，返回值为String

  $.post("userServlet","name="+userName,callBack);//此方法开发中最常用，返回值为String

  $.json("userServlet","name="+userName,callBack);//和$.post、$.get方法效果相同。此处返回值是jeson串

ajax直接发请求送

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
      <html>
      <head>
      <style>
      span{
          color: red;
      }
      </style>
      <script src="js/jquery2.0.min.js"></script>
      <script type="text/javascript">
          function show() {
              /* 获取input的值*/
              var userName=$("#userName").val();
              if (userName==null || userName==""){
                  $("span").html("您输入的不能为空")
              } else{
                  $.ajax({
                      //以键值对发送
                      "url":"userServlet",//请求地址
                      "type":"get",//请求的方式
                      "data":"name="+userName,//传递的参数
                      "dataType":"text",//返回值类型

                      //回调
                      "success":callBack,
                      "error":function () {
                          alert("回调失败");
                      }
                  })
                  //此处data是返回的数据
                  function callBack(data) {
                      if (data=="true"){
                          $("span").html("验证成功");
                      } else{
                          $("span").html("您输入的不正确");
                      }
                  }
              }
          }
    </script>
    <title>$Title$</title>
  </head>
  <body>
 <input type="test" name="userName" id="userName" onblur="show()"><span></span>
  </body>
</html>

在

里追加

标签内容，当输入框失去焦点时触发动作

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
      <html>
      <head>
      <style>
      span{
          color: red;
      }
      </style>
      <script src="js/jquery2.0.min.js"></script>
      <script type="text/javascript">
          function show() {
              /* 获取input的值*/
              var userName=$("#userName").val();
              if (userName==null || userName==""){
                  $("span").html("您输入的不能为空")
              } else{
                  $.ajax({
                      //以键值对发送
                      "url":"userServlet",//请求地址
                      "type":"get",//请求的方式
                      "data":"name="+userName,//传递的参数
                      "dataType":"text",//返回值类型

                      //回调
                      "success":callBack,
                      "error":function () {
                          alert("回调失败");
                      }
                  })
                  //此处data是返回的数据
                  function callBack() {

                     var str=["a","b","c"];
                     var $tv_ul=$("#tv_ul");//把javascript对象转换成jquer对象
                     var strJQ= $(str);//把javascript对象转换成jquer对象
                     strJQ.each(function () {
                         $tv_ul.append("<li>"+this+"</li>");
                     } );


                  }
              }
          }
    </script>
    <title>$Title$</title>
  </head>
  <body>
 <input type="test" name="userName" id="userName" onblur="show()"><span></span>
  <ul id="tv_ul"></ul>
  </body>
</html>

index.java

@ page contentType="text/html;charset=UTF-8" language="java" %>
      <html>
      <head>
      <style>
      span{
          color: red;
      }
      </style>
      <script src="js/jquery2.0.min.js"></script>
      <script type="text/javascript">
          function show() {
              /* 获取input的值*/
              var userName=$("#userName").val();
              if (userName==null || userName==""){
                  $("span").html("您输入的不能为空")
              } else{
                  //第一个参数是请求的地址，
                  // 第二个参数是传递的值，
                  // 第但三个参数是所设置的回调函数
                  $.post("userServlet","name="+userName,callBack);//此方法开发中最常用

                /*  $.ajax({
                      //以键值对发送
                      "url":"userServlet",//请求地址
                      "type":"get",//请求的方式
                      "data":"name="+userName,//传递的参数
                      "dataType":"text",//返回值类型

                      //回调
                      "success":callBack,
                      "error":function () {
                          alert("回调失败");
                      }
                  })*/

                  //此处data是返回的数据
                  function callBack(data) {
                      var  jsonStr = JSON.parse(data);//转换成规范的json串()
                    var $jsonStr=$(jsonStr);//把javascript对象转换成jquer对象
                     var $tv_ul=$("#tv_ul");//把javascript对象转换成jquer对象
                      $jsonStr.each(function () {
                         $tv_ul.append("<li>"+this+"</li>");
                     } );


                  }
              }
          }
    </script>
    <title>$Title$</title>
  </head>
  <body>
 <input type="test" name="userName" id="userName" onblur="show()"><span></span>
  <ul id="tv_ul"></ul>
  </body>
</html>