jquery常用-CSDN博客

本文介绍了如何使用jQuery进行Ajax请求，包括GET和PUT操作，并展示了如何在Ajax请求中传递URL参数。同时，文章详细阐述了如何利用jQuery UI实现对话框功能，包括基本使用和配置。此外，还讲解了pagination分页插件的引入和使用，以及如何从URL获取参数。通过这些技术，可以实现动态加载和交互式的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery

Ajax
dialog弹框
pagination分页插件
获取url参数

Ajax

	//1.请求头
 	var contextPath = document.location.origin;
    $.ajax({
        url: contextPath + "/userEntryApi/getEntryUser?approveState=" + approveState + "&page=" + page + "&size=" + size + "&userId=" + userId  ,
        type: "GET",
        // async: false,
        contentType: "application/json;charset=UTF-8",
        success: function(ret) {
            console.log(ret);
        }
    });

	//2.请求体
	 var entryInsertBean = {};
    entryInsertBean.approveState = 1;
    entryInsertBean.entryContentCh = "词条中文内容2";
    var contextPath = document.location.origin;
  	$.ajax({
        url: contextPath + "/entryApi/addEntry",
        data: JSON.stringify(entryInsertBean),
        type: "PUT",
        // async: false,
        contentType: "application/json;charset=UTF-8",
        success: function(ret) {
            console.log(ret);
        }
    });

dialog弹框

基本使用

插件下载地址
链接：https://pan.baidu.com/s/1ofQNMX1w42o1DmUlJciI2Q 
提取码：lwvo
依次引入 jq、jquery-ui.js
然后样式jquery-ui.css，图片images，common.css为一些通用样式，想省事儿可以引入

//引入完之后
//第一步在页面上丢一个空白的div 
//如 <div id="my_dialog" disabled="none;"></div>

$('#my_dialog').dialog({  //创建dialog，并设置为非自启动
        autoOpen: false,
        title :'流程详情',
         buttons:{
            '点我确认': function(){
                alert('正在提交数据');
            },
            '点我取消': function(){$('#my_dialog').dialog('close');},
        },      width: "500",
        height: "500",
        show: true,
        hide: true,
        beforeClose : function(){
            setTimeout(function () {
                $("#my_dialog").empty();
            },500);
        }
    })

$('#my_dialog').append(html);
$('#my_dialog').dialog('open');

pagination分页插件

基本使用

插件下载地址
链接：https://pan.baidu.com/s/1mFgVITtOsRJww6A9LuMs6A 
提取码：9u0u
下载好之后开始引入
先引入jquery，然后引入插件的js与css，common.css为一些通用样式，想省事儿可以引入

//引入完之后
//先在页面上丢一个div
//如：<div class="M-box3"></div>
var contextPath = document.location.origin;
$.ajax({
            url: contextPath + "/flow/" + ur + "?page=1&" + "size=" + size,
            type: "GET",
            // async: false,
            success: function(ret) {
                if(ret.flag && ret.listCount > 0){
                    $("#flow tbody").empty();
                    showTableData($(".current").attr("tabVal"),ret.data);

                    $('.M-box3').pagination({
                        pageCount: Math.ceil(ret.listCount/size),
                        totalData: ret.listCount,
                        jump: true,
                        coping: true,
                        homePage: '首页',
                        endPage: '末页',
                        prevContent: '上页',
                        nextContent: '下页',
                        isHide: true,
                        keepShowPN: true,
                        mode: "fixed",
                        callback: function (index) {
                            var ur = $(".current").attr("tabVal");
                            $.ajax({
                                url: contextPath + "/flow/" + ur + "?page="  + index.getCurrent() + "&size=10",
                                type: "GET",
                                // async: false,
                                success: function(ret) {
                                    if(ret.flag && ret.listCount > 0){
                                        $("#flow tbody").empty();
                                        showTableData($(".current").attr("tabVal"),ret.data);
                                    }
                                }
                            });
                        }
                    });
                }
            }
        });

获取url参数

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}