通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面相关的知识,希望对你有一定的参考价值。

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

 技术分享

 

从数据库中查询仓库信息,显示在下拉菜单中:

首先,引入js插件,这里使用jquery-1.8.3.js

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>

当页面加载完成后,就应该发送ajax请求到数据库,来加载数据到下来菜单中

故这是一个页面加载事件

$(function(){

//dom初始化后加载

//$.post(请求url,请求参数,回调函数,返回的类型);

$.post("${pageContext.request.contextPath}/store_listAjax.action",function(data){

//data:转换后的对象:json对象数组-dom对象

alert(data);

});

});

</script>

这时候响应到页面的应该是json格式的数据

 技术分享

所以在store_listAjax.action中的返回的结果集类型必须为json格式

 技术分享

其对应在struts.xml中的结果集类型

 技术分享

当上面都完成后,这时候就需要把返回到页面的json格式的数据data放到下拉菜单中

根据jquery API 可以找到 $(object).each([callback])的方法,这是又一个通用方法,可用于遍历对象和数组,object是需要遍历的对象或者数组,callback是每一个成员/元素需要执行的回调函数

alert(data)替换成以下代码

$(data).each(function(){

var option=$("<optionvalue=‘"+this.id+"‘>"+this.name+"</option>");

//添加到下拉列表中

$("#store_id").append(option);

});

这时候就可以把数据库中的数据添加到下拉菜单中

 技术分享

 

以上是关于通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面的主要内容,如果未能解决你的问题,请参考以下文章

Jquery——AJAX应用篇

原生Ajax XMLHttpRequest对象

Ajax在jQuery中的应用(加载异步数据请求服务器数据)

jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

JQuery Ajax 请求不通过 post 变量发送

jQuery 将 ISO 字符集设置为 ajax 请求