ajax的一切正常,却出不来结果

利用jQuery可以将结构(Html)、美化(Css)与交互(JavaScript)的部分有效的分离,从而让页面得到良好的可读性。

利用jQuery开发程序的步骤如下:

1、将jquery-1.11.3.js 复制到工程的js目录下

2、 在当前页面利用<script>标签引入jquery-1.11.3.js

3、在引入该js后,我们的程序中就增加了一个内置对象jQuery,这是jQuery的核心对象,同时jQuery对象还可以使用美元符号$进行替

4、在引入后<script>标签内编写jQuery代码

文档就绪函数

文档就绪函数是jQuery中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。

简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

文档就绪函数的使用方法

    完整方式: $(document).ready(fn) 或者jQuery(document).ready(fn)
    简写方式: $(fn)

其中参数fn是指一个函数,代表了页面DOM元素加载完成后要执行的代码.

请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

案例

<body>
	<!-- 添加页面布局 -->
	<div>
		<table border="1">
			<tr style="height: 40px;display: none;">
				<td style="width: 100px">商品id</td>
				<td style="width: 150px">
					<input type="text" id="id" value="">
				</td>
			</tr>
			<tr style="height: 40px;">
				<td style="width: 100px">商品分类</td>
				<td style="width: 150px">
					<select id="cate"  οnchange="change()">
					<option>---请选择---</option>
					</select>
				</td>
			</tr>
			<tr style="height: 40px;">
				<td style="width: 100px" >商品品牌</td>
				<td style="width: 150px">
					<select id="brand">
						<option>---请选择---</option>
					</select>
				</td>
			</tr>
			<tr style="height: 40px;">
				<td style="width: 100px" >商品名称</td>
				<td style="width: 150px" >
					<input id="name" type="text">
				</td>
			</tr>
			<tr style="height: 40px;">
				<td style="width: 100px" >商品描述</td>
				<td style="width: 150px">
					<textarea rows="5" cols="10" id="desc"></textarea>
				</td>
			</tr>
			<tr style="height: 40px;">
				<td style="width: 100px" >商品价格</td>
				<td style="width: 150px" >
					<input type="text" id="price">
				</td>
			</tr>
			<tr style="height: 40px;">
				<td colspan="2" style="text-align: center;">
					<button οnclick="tj()">提交</button>
					<button >重置</button>
					<button οnclick="gbtj()">关闭</button>
				</td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript">
	/* 就绪函数,加载分类列表 */
	$(document).ready(function(){
		alert("11");
		$.ajax({
			   type: "POST",
			   url: "goodsController?method=getCateList",
			   dataType:"json",
			   data: "",
			   success: function(obj){
				    var fl=""; 
			    	for(var i=0;i<obj.length;i++){
			    		fl+="<option value='"+obj[i].id+"'>"+obj[i].cat_name+"</option>";
			    	}
			    	$("#cate").html(fl);
			   }
		});
	});
</script>

这种时候就会出现ajax没有触发的情况,这时将<script></script>放在<body></body>之前,才会正常显示。

当遇到代码没有问题,可结果就是运行不出来时,不妨试一下改变<script></script>的顺序。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值