Ajax技术在Jquery中的应用

随风

jQuery中的常用的ajax函数

ajax(...)
get(...)
post(...)
getJSON(...)

jQuery中常用的Ajax函数应用案例

首先在客户端,新构建一个页面,在<body>中引入jquery-min.js文件

<fieldset>
    <legend>Jquery Ajax function</legend>
    <button onclick="doGet()">$.get(..)</button>
    <button onclick="doPost()">$.post(..)</button>
    <button onclick="doAjax()">$.ajax(..)</button>
    <button onclick="doLoad()">$.load(..)</button>
    <span id="resultId"></span>
    </fieldset>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    

1.get函数应用

客户端

function doGet(){
 1.请求url
 let url ="/jquery/doAjaxGet";
 2.请求参数
 let params="msg= hello everyone jiayouya"
 3发送异步请求
 $.get(url,params,(rusult)=>{
    $("#resultId").html(result);
 });
}

服务端

@Controller
@RequestMapping("/jquery")
public class JQueryController {
    @RequestMapping("/doAjaxGet")
    @ResponseBody
    public String doAjaxGet(String msg) {
        //将客户端传到服务端的字符串转换为大写,然后以字符串的形式响应给客户端
        return "Jquery get request result" + msg.toUpperCase();
        
    }
    }

2.post函数应用

客户端

function doPost(){
 1.请求url
 let url ="/jquery/doAjaxPost";
 2.请求参数
 let params="title=AAA&&id=10"
 3发送异步请求
 $.post(url,params,(rusult)=>{
    $("#resultId").html(result);
 });
}

服务端



    @RequestMapping("/doAjaxPost")
    @ResponseBody
    public String doAjaxGet(String title,Integer id) {
        
        return "Jquery get request result" +title+"/"+id ;
        
    }

3.ajax函数应用

客户端

function ajax(){
        //1 请求url
        let url ="/jquery/doAjaxPost";
        //2请求参数
        let params="id=10&&title=AAA&&age=23";
        //3发送异步请求
        $.ajax({
        url:url,
        data:params,
        dataType:"json",
        async:true,
        success:(result)=>{
            $("#resultId").html(result);
        },
        error:function(xhr){
                console.log(xhr.statusText);
                $("#resultId").html(xhr.statusText)
        }
        })
}

4 load函数应用

客户端

function doLoad(){
//1 请求url
        let url ="/jquery/doAjaxGet";
        //2请求参数
        let params="msg= hello cgb teacher ";
        //3发送异步
        $("#resultId").load(url,params);
        }

image

阅读 589

任重而道远

13 声望
1 粉丝
0 条评论

任重而道远

13 声望
1 粉丝
文章目录
宣传栏