jquery toggle怎么只能执行一个ajax请求啊??

呵呵我来啦 2012-12-31 03:20:32
RT:类似如下一个代码由两个ajax请求一个数据是order=1,另一个是oerder=2,但是点击这个按钮的时候永远都只执行第一个为什么???
$('#bt1').toggle(function () {
// $('#requestAjaxText').load("/title/searchpage", { "order": 1 }, function () { alert("ok1") });
$('#requestAjaxText').load("/title/searchpage", { "order": 1 });
}, function () {
$('#requestAjaxText').load("/title/searchpage", { "order": 2 });
})

晕~~求指导!!
...全文
183 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
呵呵我来啦 2012-12-31
  • 打赏
  • 举报
回复
谢谢ls提供的方法,经测试第三步是能第一次弹出test,但是执行异步请求后就点击button就没用 了,发现第二步也是这样,估计是load这里有问题,我再看看吧,谢谢楼上的朋友!!
lufengsn 2012-12-31
  • 打赏
  • 举报
回复
这种怪事建议楼主使用排除法:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
    $(function(){
		// 第一步, 測試toggle函數
		$("#bt1").toggle(function () {
            alert('First');
         }, function () {
			alert('Second');
         });
		 
		// 第二步, 第一步OK,測試第一個Ajaxt是否成功
         $("#bt1").toggle(function () {
             $('#requestAjaxText').load("/title/searchpage", { "order": 1 });
         }, function () {
            alert('test');
         });
		 
		 // 第三步,第二步不能弹出 “test”
         $("#bt1").toggle(function () {
			alert('test');
         }, function () {
            $('#requestAjaxText').load("/title/searchpage", { "order": 2 });
         });
    });
</script>
</head>
<body>
<input type="button" id="bt1" value="Ajax請求"/>
呵呵我来啦 2012-12-31
  • 打赏
  • 举报
回复
2楼…… 你那个我明白,不过执行两个ajax请求就有问题了!! 3楼…… 我用firebug查看了发送的post数据全是order=1;完全就是没执行到另一个function啊,即使我把另一个function里面的内容换成不是ajax请求比如说alert("123");都执行不到 我郁闷了!!
  • 打赏
  • 举报
回复
,弄错鸟,toggle也有2个function。。。。是不是你动态页没获取到order,导致输出的内容都一样。。
  • 打赏
  • 举报
回复

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/JavaScript">
	$(function(){
		 $("#bt1").toggle(function () {
			alert(123);
             //$('#requestAjaxText').load("/title/searchpage", { "order": 1 });
         }, function () {
			alert(456);
            // $('#requestAjaxText').load("/title/searchpage", { "order": 2 });
         })
	})
</script>
</head>
<body>
<input type="button" id="bt1" value="1233"/>
  • 打赏
  • 举报
回复
用错函数了吧。是hover才是2个参数是function
        $('#bt1').hover(function () {
            //            $('#requestAjaxText').load("/title/searchpage", { "order": 1 }, function () { alert("ok1") });
            $('#requestAjaxText').load("/title/searchpage", { "order": 1 });
        }, function () {
            $('#requestAjaxText').load("/title/searchpage", { "order": 2 });
        })
css(name) 访问第一个匹配元素的样式属性。 -------------------------------------------------------------------------------- Return a style property on the first matched element. 返回值 String 参数 name (String) : 要访问的属性名称 示例 取得第一个段落的color样式属性的值。 jQuery 代码: $("p").css("color"); toggle(fn,fn) 每次点击时切换要调用的函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。 可以使用unbind("click")来删除。 -------------------------------------------------------------------------------- Toggle between two function calls every other click. Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions. Use unbind("click") to remove. 返回值 jQuery 参数 fn (Function) : 第奇数次点击时要执行的函数。 fn (Function) : 第偶数次点击时要执行的函数。 示例 对表格的切换一个jQuery 代码: $("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } ); ajaxSuccess(callback) AJAX 请求成功时执行函数。Ajax 事件。 XMLHttpRequest 对象和设置作为参数传递给回调函数。 -------------------------------------------------------------------------------- Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event. The XMLHttpRequest and settings used for that request are passed as arguments to the callback. 返回值 jQuery 参数 callback (Function) : 待执行函数 示例 当 AJAX 请求成功后显示消息。 jQuery 代码: $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("
  • Successful Request!
  • "); }); jQuery.ajax(options) 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。 -------------------------------------------------------------------------------- Load a remote page using an HTTP request. This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks). $.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually. Note: If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected problems in your script. See Specifying the Data Type for AJAX Requests for more information. $.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used. As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request. 返回值 XMLHttpRequest 参数 options (可选) : AJAX 请求设置。所有选项都是可选的。 选项 async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax Event. cache (Boolean) : (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。 Ajax 事件。 contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 dataType (String) : 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。Ajax 事件。 global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。 ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。 timeout (Number) : 设置请求超时时间(毫秒)。此设置将覆盖全局设置。 type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url (String) : (默认: 当前页地址) 发送请求的地址。 示例 加载并执行一个 JS 文件。 jQuery 代码: $.ajax({ type: "GET", url: "test.js", dataType: "script" }); -------------------------------------------------------------------------------- 保存数据到服务器,成功时显示信息。 jQuery 代码: $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } }); -------------------------------------------------------------------------------- 装入一个 HTML 网页最新版本。 jQuery 代码: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); -------------------------------------------------------------------------------- 同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 jQuery 代码: var html = $.ajax({ url: "some.php", async: false }).responseText; -------------------------------------------------------------------------------- 发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。 jQuery 代码: var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
    第1章 第一个简单的jQuery程序 jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤选择器 使用jQuery属性过滤选择器 使用jQuery子元素过滤选择器 使用jQuery表单对象属性过滤选择器 使用jQuery表单过滤选择器 第3章 DOM树状文档 获取元素的属性 设置元素的属性 设置元素的属性 获取或设置元素的内容 获取或设置元素的值 直接设置元素样式值 增加CSS类别 类别切换 动态创建节点元素 动态插入节点方法 动态插入节点方法 复制元素节点 替换元素节点 包裹元素节点 遍历元素 删除元素 数据管理 第4章 事件中的冒泡现象 bind方法绑定事件 映射方式绑定不同的事件 切换事件hover 切换事件toggle 移除事件unbind 其他事件one 其他事件trigger 文本框中的事件应用 列表框中事件应用 列表中的导航菜单应用 网页选项卡应用 删除记录时的提示效果 第5章 show()与hide()方法 动画效果的show()与hide()方法 toggle()方法 slideDown()与slideUp()方法 slideToggle()方法 fadeIn()和fadeOut()方法 fadeTo()方法 简单的动画 移动位置的动画 队列中的动画 动画停止和延时 动画方式浏览图片 第6章 传统的JavaScript方法实现Ajax功能 load()方法实现Ajax功能 getJSON函数获取数据 getScript函数获取数据 get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form表单插件 cookie插件 autocomplete插件 notesforlightbox插件 ContextMenu插件 JQZoom放大镜插件 编写一个对象级别的插件 编写一个类级别的插件 uploadify文件上传插件 第8章 使用draggable插件实现对象的拖曳操作 使用droppable插件实现对象的置放操作 使用sortable插件实现列表中表项的拖曳排序操作 使用accordion插件实现区域块的折叠操作 使用datepicker插件实现选择日期的操作一 使用datepicker插件实现选择日期的操作二 使用tabs插件展示选项卡的基本功能 使用dialog插件弹出提示和确定信息对话框 使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()工具函数筛选数组中的元素 使用$.map()工具函数变更数组中的元素 使用$.inArray()工具函数搜索数组中指定元素的位置 使用$.trim()工具函数除掉字符串的空格符 使用$.isEmptyObject()函数检测对象是否为空 使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用jQuery扩展工具函数实现对字符串指定类型的检测< 第10章 在指定的查找范围内获取DOM元素 选择器中含有空格符与不含空格符的区别 事件中的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data()方法在元素上存取移JSON格式的数据 解决jQuery库先于其他库导入时变量“$”的使用权 解决jQuery库后于其他库导入时变量“$”的使用权 使用子查询优化选择器性能 减少对DOM元素直接操作 DOM对象与jQuery对象的类型转换 第11章 应用案例-聊天室系统 应用案例_图片切割

    87,991

    社区成员

    发帖
    与我相关
    我的任务
    社区描述
    Web 开发 JavaScript
    社区管理员
    • JavaScript
    • 无·法
    加入社区
    • 近7日
    • 近30日
    • 至今
    社区公告
    暂无公告

    试试用AI创作助手写篇文章吧