jquey的 ajax请求的几种方式

最新推荐文章于 2024-03-13 07:00:00 发布

fucktester

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量1k

点赞数 1

分类专栏： java 文章标签： javascript json jquery ajax callback

本文链接：https://blog.csdn.net/fucktester/article/details/69413313

版权

java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在jquery中，提供了集中方法来进行ajax操作

一、$.get(url,[data],[callback])

向服务器发起get操作。

说明：url为请求地址，data为请求数据的列表（json对象），callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。

<script type="text/javascript">
	var itemControl = {
			param:{
				descUrl:"/item/desc/",
				paramUrl:"/item/param/"
			},
			//请求商品描述
			getItemDesc:function(itemId) {
				$.get(itemControl.param.descUrl+itemId+".html", function(data){
					//返回商品描述的html，直接显示到页面
					$("#item-desc").append(data);
				});
			},
			//参数请求flag
			haveParam:false,
			//请求规格参数
			getItemParam:function(itemId) {
				//如果没有查询过规格参数，就做请求
				if (!itemControl.haveParam) {
					$.get(itemControl.param.paramUrl+itemId+".html", function(data){
						//返回商品规格的html，直接显示到页面
						$("#product-detail-2").append(data);
						//更改flag状态
						itemControl.haveParam = true;
					});
				}
			}
	};
	$(function(){
		//取商品id
		var itemId = "${item.id}";
		//给商品规格参数tab页绑定事件
		$("#p-con-attr").bind("click", function(){
			
			itemControl.getItemParam(itemId);
		});
		//延迟一秒加载商品描述信息
		setTimeout(function(){
			itemControl.getItemDesc(itemId);
		},1000);
	});
</script>

二、$.getJSON(url,[data],[callback])

向服务器发起get操作。

说明，对于get或getJSON方法，对服务器的返回数据格式要求有区别。

如果是getJSON方法，则要求服务器返回的是合法的json格式的字符串，这样在回到函数callback的第一个参数,实际就是已经转换为js中的对象数据，不再是原始的字符串。如果服务器返回的是非合法的json格式字符串，则浏览器则无法成功获取到数据。

如果是get方法，则服务器返回的是任意格式的字符串，因为在回到函数callback的第一个参数,得到的就是原始的字符串内容，如果要想额外处理（比如转成js对象），需要自己处理。parse,Stringfy

注意：不论是哪种ajax请求，服务器底层返回的都是字符串内容。只是字符串格式的区别罢了，如 htnl格式，xml格式，json格式。

URL_Serv: "http://127.0.0.1:8081/rest/item/cat/list?callback=category.getDataService",
//URL_Serv: "http://localhost:8082/category.json",

FN_GetData: function() {
    	//使用jsonp来实现跨域请求
        $.getJSONP(this.URL_Serv, category.getDataService);
    	//直接使用ajax请求json数据
    	/*$.getJSON(this.URL_Serv, function(json){
    		category.getDataService(json);
    	});*/

getDataService: function(a) {
        var b = [], c = this;
        $.each(a.data, function(a) {
            this.index = a, "l" == this.t && (this.i = c.FN_RefactorJSON(this.i, 7)), b.push(c.renderItem(this, a))
        });
//参考商城lib-v1.js中1205行

三、$.post(url,[data],[callback],[type])

向服务器发起post请求

说明：这个函数跟$.get()参数差不多，多了一个type参数，type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么要求服务器返回的格式必须是合法的json格式的，这时在callback中获取到的就是转换过的json对象。

如果没有设置，就和$.get()一样，服务器可返回任意格式的字符串，在callback中获取到的就是原始的字符串。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>登录</title>
    <link type="text/css" rel="stylesheet" href="/css/login.css"/>
    <script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
</head>
<body>
<div class="w">
    <div id="logo">
    	<a href="http://localhost:8082" clstag="passport|keycount|login|01">
    		<img src="/images/taotao-logo.gif" alt="" width="170" height="60"/>
    	</a><b></b>
   	</div>
</div>
<form id="formlogin" method="post" οnsubmit="return false;">
    <div class=" w1" id="entry">
        <div class="mc " id="bgDiv">
            <div id="entry-bg" clstag="passport|keycount|login|02" style="width: 511px; height: 455px; position: absolute; left: -44px; top: -44px; background: url(/images/544a11d3Na5a3d566.png) 0px 0px no-repeat;">
			</div>
            <div class="form ">
                <div class="item fore1">
                    <span>用户名</span>
                    <div class="item-ifo">
                        <input type="text" id="loginname" name="username" class="text"  tabindex="1" autocomplete="off"/>
                        <div class="i-name ico"></div>
                        <label id="loginname_succeed" class="blank invisible"></label>
                        <label id="loginname_error" class="hide"><b></b></label>
                    </div>
                </div>
                <script type="text/javascript">
                    setTimeout(function () {
                        if (!$("#loginname").val()) {
                            $("#loginname").get(0).focus();
                        }
                    }, 0);
                </script>
                <div id="capslock"><i></i><s></s>键盘大写锁定已打开，请注意大小写</div>
                <div class="item fore2">
                    <span>密码</span>
                    <div class="item-ifo">
                        <input type="password" id="nloginpwd" name="password" class="text" tabindex="2" autocomplete="off"/>
                        <div class="i-pass ico"></div>
                        <label id="loginpwd_succeed" class="blank invisible"></label>
                        <label id="loginpwd_error" class="hide"></label>
                    </div>
                </div>
                <div class="item login-btn2013">
                    <input type="button" class="btn-img btn-entry" id="loginsubmit" value="登录" tabindex="8" clstag="passport|keycount|login|06"/>
                </div>
            </div>
        </div>
        <div class="free-regist">
            <span><a href="/user/showRegister" clstag="passport|keycount|login|08">免费注册>></a></span>
        </div>
    </div>
</form>
<script type="text/javascript">
	var redirectUrl = "${redirect}";
	var LOGIN = {
			checkInput:function() {
				if ($("#loginname").val() == "") {
					alert("用户名不能为空");
					$("#loginname").focus();
					return false;
				}
				if ($("#nloginpwd").val() == "") {
					alert("密码不能为空");
					$("#nloginpwd").focus();
					return false;
				}
				return true;
			},
			doLogin:function() {
				$.post("/user/login", $("#formlogin").serialize(),function(data){
					if (data.status == 200) {
						alert("登录成功！");
						if (redirectUrl == "") {
							location.href = "http://localhost:8082";
						} else {
							location.href = redirectUrl;
						}
					} else {
						alert("登录失败，原因是：" + data.msg);
						$("#loginname").select();
					}
				});
			},
			login:function() {
				if (this.checkInput()) {
					this.doLogin();
				}
			}
		
	};
	$(function(){
		$("#loginsubmit").click(function(){
			LOGIN.login();
		});
	});
</script>
</body>
</html>

四、$.ajax(opiton)

说明：$.ajax()这个函数功能强大，可以对ajax进行许多精确的控制。格式如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<c:set var="picPath" value="http://127.0.0.1:8003/ssmImage19"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
function submitImgSize1Upload(){
	
	var option={
			type:'POST',
			url:'${pageContext.request.contextPath }/upload/uploadPic.do',
			dataType:'text',
			data:{
				fileName : 'imgSize1File'
			},
			success:function(data){
				
				//把json格式的字符串转换成json对象
				var jsonObj = $.parseJSON(data);
				
				//返回服务器图片路径，把图片路径设置给img标签
				$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);
				//数据库保存相对路径
				$("#imgSize1").val(jsonObj.relativePath);
			}
			
		};
	
	$("#itemForm").ajaxSubmit(option);//这是jquery.form.js中异步提交表单的方法,注意与ajaxForm的区别,原生ajax是$("itemForm").ajax
}
</script>
</head>
<body> 
<form id="itemForm" action="${pageContext.request.contextPath }/items/saveOrUpdate.do" method="post">
<input type="hidden" name="id" value="${item.id }"/>
修改商品信息：
<table width="100%" border=1>
<tr>
	<td>商品图片</td>
	<td>
		<p><label></label>
		<img id='imgSize1ImgSrc' src='${picPath }${item.pic }'  height="100" width="100" />
		<input type='file' id='imgSize1File' name='imgSize1File' class="file" οnchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
        <input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$" tip="亲！您忘记上传图片了。" />
		</p>
	</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("basePath", request.getContextPath()+"/") ;
%>
<html>
<head>
    <%@include file="/common/header.jsp"%>
    <title>我要投诉</title>
     <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script>
    	window.UEDITOR_HOME_URL = "${basePath }js/ueditor/";
    	var ue = UE.getEditor('editor');
    	
    //获取部门下对应的人员列表
    function doSelectDept(){
    	//1、获取部门
    	var dept = $("#toCompDept option:selected").val();
    	if(dept != ""){
	    	//2、根据部门查询该部门下的所有人员列表
	    	$.ajax({
	    		url:"${basePath}sys/homeJson_getUserJson2.action",
	    		type:"post",
	    		data:{"dept":dept},
	    		dataType:"json",
	    		success: function(data){
	    			//3、解析返回的人员列表将人员列表设置到 被投诉人下拉框中
	    			if(data != null && data != undefined){
	    				if("success" == data.msg){
	    					var $toCompName = $("#toCompName");
	    					$toCompName.empty();
	    					$.each(data.userList, function(i,user){
	    						$toCompName.append("<option value='" +user.name+ "'>" + user.name +"</option>");
	    					});
	    					
	    				} else {alert("获取部门人员列表失败！");}
	    			} else {
	    				alert("获取部门人员列表失败！");
	    			}
	    		},
	    		error: function(){alert("获取部门人员列表失败！");}
	    	});
	    	
    	} else {
    		//清空被投诉人下拉框
    		$("#toCompName").empty();
    	}
    }
    
    //提交表单
    function doSubmit(){
    	//alert($("#form").serialize());
    	//1、保存投诉（异步）
    	$.ajax({
    		url:"${basePath}sys/home_complainAdd.action",
    		type:"post",
    		data: $("#form").serialize(),
    		success:function(msg){
    			if("success" == msg){
	    			//2、提示用户投诉成功
	    			alert("投诉成功！");
	    	    	//3、刷新父窗口
	    	    	window.opener.parent.location.reload(true);
	    	    	//4、关闭当前我要投诉窗口
	    	    	window.close();
    			} else {
    				alert("投诉失败！");
    			}
    		},
    		error: function(){
    			alert("投诉失败！");
    		}
    	});
    	
    }
    </script>
</head>
<body>
<form id="form" name="form" action="" method="post" enctype="multipart/form-data">
    <div class="vp_d_1">
        <div style="width:1%;float:left;">    </div>
        <div class="vp_d_1_1">
            <div class="content_info">
    <div class="c_crumbs"><div><b></b><strong>工作主页</strong> - 我要投诉</div></div>
    <div class="tableH2">我要投诉</div>
    <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >
        <tr>
            <td class="tdBg" width="250px">投诉标题：</td>
            <td><s:textfield name="comp.compTitle"/></td>
        </tr>
        <tr>
            <td class="tdBg">被投诉人部门：</td>
            <td><s:select name="comp.toCompDept" id="toCompDept" list="#{'':'请选择','部门A':'部门A','部门B':'部门B' }" οnchange="doSelectDept()"/></td>
        </tr>
        <tr>
            <td class="tdBg">被投诉人姓名：</td>
            <td>
            	<select name="comp.toCompName" id="toCompName"></select>
            </td>
        </tr>
        <tr>
            <td class="tdBg">投诉内容：</td>
            <td><s:textarea id="editor" name="comp.compContent" cssStyle="width:90%;height:160px;" /></td>
        </tr>
        <tr>
            <td class="tdBg">是否匿名投诉：</td>
            <td><s:radio name="comp.isNm" list="#{'false':'非匿名投诉','true':'匿名投诉' }" value="true"/></td>
        </tr>
       
    </table>
	<s:hidden name="comp.compCompany" value="%{#session.SYS_USER.dept}"/>
	<s:hidden name="comp.compName" value="%{#session.SYS_USER.name}"/>
	<s:hidden name="comp.compMobile" value="%{#session.SYS_USER.mobile}"/>
    <div class="tc mt20">
        <input type="button" class="btnB2" value="保存" οnclick="doSubmit()" />
            
        <input type="button"  οnclick="javascript:window.close()" class="btnB2" value="关闭" />
    </div>
    </div></div>
    <div style="width:1%;float:left;">    </div>
    </div>
</form>
</body>
</html>

五、$.getScript( url, [callback] )

getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨域载入JS文件。这个函数的意义是巨大的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。参数url是待载入 JS 文件地址，callback是(可选) 成功载入后回调函数。

六、jquery对象.load( url, [data], [callback] )

load函数可以载入静态页面内容到指定jQuery对象。其中url请求的HTML页的URL地址，data是(可选)请求参数，callback是(可选)完成后的回调函数。

fucktester

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquey的 ajax请求的几种方式

在jquery中，提供了集中方法来进行ajax操作一、$.get(url,[data],[callback])向服务器发起get操作。说明：url为请求地址，data为请求数据的列表（json对象），callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个参数为服务器的状态，是可选参数。 var itemControl = { p
复制链接

扫一扫

专栏目录