Jquery ajax常用几个数据请求的方法以及（Jquery ajax模仿百度搜索框详解）

ajax=异步Javascript和XML(在不重新加载网页的情况下，ajax通过后台加载数据，在网页上显示)
ajax()方法通过请求HTTP请求加载远程数据。
jQuery ajax 的常用方法：$.get()  ,$.post()  ,$.json()  ,$.getjson()
1.jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
GET-从服务器获得数据。(可能返回缓存数据)
POST-也可从服务器获得数据。不过不缓存，并且常用于连同请求一起发送数据。
  get语法：$.get(url,callback);
  用法如下：  /*  $.get({
          url:"data/data.txt",
          dataType:"",
          data:"",
          success:function(data){
          console.log(data)
          }
         }
  post语法：$.post(url,data,callback)
  用法如下： $.post({
               data:"",//存放修改的数据
               url:"data/data.txt",
               dataType:"",
               success:function(data){
                   console.log(data)
               },
               error:function(){
               }
           })
2.jquery ajax以json格式返回
例子：
 $.ajax({
               method:"post",//或者get
               data:"",
               url:"data/data.txt",
               dataType:"json",
               success:function(data){
                   console.log(data);
               }
           })
3.jquery ajax 中的getjson()
例子：$.getJSON({
               method:"post",
               data:{wd:"2"},
               url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=getback",
               dataType:"jsonp",//跨域
               jsonpCallback:"getback",//回调函数
               success:function(data){
                   console.log(data);
               }
           })

接下来是模仿百度搜索框运用jquery ajax，帮你熟练掌握跨域的问题。

要模仿百度搜索框必须知道百度的搜索接口

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=

1.html部分

<div class="block">
    <input id="test" type="text"/><span id="btn">百度一下</span>
</div>

2.css部分

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width:600px;
            height: 40px;
            border:1px solid silver;
            margin: auto;
            position: absolute;
            left:0;
            top:0;
            bottom: 0;
            right: 0;
        }
        .block>input{
            width:485px;
            height: 38px;
            outline: none;
            border-style: none;
            font-size: 18px;
            padding-left: 15px;
        }
        .block span{
            display: inline-block;
            width: 100px;
            height: 40px;
            background-color: #3da4ff;
            color: white;
            position: absolute;
            top: 0;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .ullist{
            position: absolute;
            margin: 0;
            top:40px;
            left:0;
            width: 500px;
            height: auto;
            background-color: rgb(240, 240, 240);
        }
        .ullist>li{
            list-style: none;
            padding-left:15px;
            line-height: 26px;
            font-size: 16px;
            cursor: pointer;
        }
        .ullist>li a{
            color: black;
            text-decoration: none;
        }
    </style>

3.script部分

<script>
    $(function () {

//根据搜索框中的中的情况，使用keyup来判断是否要发送请求，如果使用keydown会发现输入一个词后要再按一下键盘才
// 能发送请求获取数据，使用keyup在输入完词以后就会立即发送请求
        $("#test").on("keyup",function(e){
            $.ajax({
                method: "post",
                url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr",
                data: {wd: $(this).val()},//文本框中的值
                jsonpCallback: "sr",//百度的回调函数
                dataType: "jsonp",//跨域
                success:function(data){
                    //创建ul ,动态创建li 用于放与文本框相关的名词列表
                    $(".ullist").remove();
                    var ul = $("<ul class='ullist'></ul>");
                     for(var i= 0;i<data.s.length;i++){
                     $("<li><a href='https://www.baidu.com/s?wd="+data.s[i]+"'>"+data.s[i]+"</a></li>").appendTo(ul)
                     }
                   $(".block").append(ul);
                }
            })
        });

//点击百度一下这个按钮的时实现跳转页面
        $("#btn").on("click",function(e){
            location.href="https://www.baidu.com/s?wd="+$("test").val();
        })
    })
   
</script>