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

最新推荐文章于 2021-08-06 10:07:00 发布

小透明y

最新推荐文章于 2021-08-06 10:07:00 发布

阅读量591

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/y_blueblack/article/details/80782105

版权

利用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>的顺序。