通过在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);

});

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

时间: 2024-10-02 04:50:24

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

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

在jquery中写标准的ajax请求

1 $(function(){ 2 $.ajax({ 3 url:"http://www.microsoft.com", //请求的url地址 4 dataType:"json", // 接收json格式数据 5 async:true,//请求是否异步,默认为异步,这也是ajax重要特性 6 data:{"id":"value"}, //参数值 7 type:"GET", //请求方式 8 beforeSe

巧用ajax请求服务器加载数据列表时提示loading

我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 这里主要讲jQuery ajax的get,查询数据时,它的结构为: $.aja

C#在窗口中ComboBox控件中加载数据库数据

首先,窗体一加载,绑定省份和城市数据 //窗口加载事件 private void register_Load(object sender, EventArgs e) { bindPro();//绑定省份数据函数 } /// <summary> /// 绑定省份数据函数 /// </summary> public void bindPro() { //获取数据库数据 List<ProvinceData> list = new ProvinceDA().Select();

easyui中 combogrid控件的loadData方法加载本地数据

<!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 runat="server"> <title

jquery中的几种Ajax应用

jQuery 中几种Ajax的应用 <script type="text/javascript"> //jquery中的几种ajax请求 function ajaxRequest(){ /* $.ajax();最底层的方法 load().$.post().$.ajax();第二层 $.getJSON(); $.getScript();//第三层 /* /*******************************load方法************************

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同

这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的..   $.get(url,[data],[callback])     //描述: 从服务器加载数据,请求方式为GET. url            为请求地址 data         为请求数据的列表 callback    为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,这个数据是字符串形式的 ...第二个参数为服务器的状态,是可选参数. 例: $.get("a.ashx",{Id:15,c

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja