paip.jquery ajax 请求JSON数据填充SELECT全过程纪录

----作者Attilax ， 1466519819@qq.com---

1.敲定触发事件
----------------
<html:select property="ID" οnchange="changex(this.value)">
<html:options collection="lessonList" property="ID" labelProperty="name"/>
</html:select>

2.开始AJAX
-----------------------
<script language="javascript" src="<%=m.path.appPath(request) %>/taoteapkg/jquery-1.7.2.min.js"></script>
<script >
function changex(val)
{

var url="<%= m.path.appPath(request) %>/taoteapkg/ajax.jsp";
jQuery.get(url, { method: "", lessonid: val },
function(data){

bindx(data);
});

}

3.建立服务端响应JSON
------------------------
--jsp
<%

TaoTiDAO taoTiDAO = new TaoTiDAO();
String s= taoTiDAO.queryTaoTiByLessonid4ajax( request.getParameter("lessonid") );

%>
<%=s%>

--import
json-lib-2.1.jar
D:\099\exampro\build\web\WEB-INF\lib\ezmorph-1.0.3.jar
D:\099\exampro\build\web\WEB-INF\lib\commons-lang-2.6.jar
D:\099\exampro\build\web\WEB-INF\lib\commons-collections.jar

---source

public String queryTaoTiByLessonid4ajax(String lessonid)
   {
        List li=queryTaoTi(Integer.parseInt(lessonid));

       JSONArray jsonArray = JSONArray.fromObject( li );
       // System.out.println( jsonArray );
return jsonArray.toString();

   }

4.解析返回的JSON并绑定到SELECT控件
---------------------------------
function bindx(data)
{

$("#slttt").empty();
var objs = eval('(' + data + ')');
    for (var o in objs) {

             var     jsonObj = objs[o];
               var    optionstring = "<option value=\"" + jsonObj.ID + "\" >" + jsonObj.name + "</option>";
              $("#slttt").append(optionstring);   //为Select追加一个Option(下拉项)
        }

5.初使化绑定，上方SELECT第一个选项的从中得出的列表值，绑定在下边的SELECT
--------------------------------------------------------------------------

</script>

6.主要难点
---------------
在于遍历JSON LIST
还有JQUERY选取SELECT时，没有ID，通过NAME去选择的。

7.参考
-----------------

jquery ajax json 通过后台代码(查询数据库)绑定html控件select 下拉框_凯子的空间_百度空间
jQuery的Select操作集合 - OPEN 开发经验库.htm - 快捷方式 (2)

paip.jquery ajax 请求JSON数据填充SELECT全过程纪录相关推荐

jquery editable ajax,使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段...
我迫切需要JavaScript专家的一些帮助 . 我花了最近7个小时尝试了数百种代码组合,以获得基本的标签选择输入字段,以便与库 x-editable 和 select2 一起使用 . 我正在构建一个 ...
(thinkphp、jQuery)ajax返回json数据
Thinkphp部分代码: <?php namespace Yxg\Controller;use Think\Controller;class IndexController extends C ...
jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery +Ajax 请求Json文件，绘制Echarts 上下两个堆叠折线图
魁首
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
ajax如何传递josn数据,jq之ajax以及json数据传递
闭包演示 function transfer(){ var dat = $( "#sel" ).val(); //console.log(dat) $.ajax({ type:&q ...
jquery的ajax，请求JSON数据。
jquery的ajax,请求JSON数据. 第一个页面:1.htm <!DOCTYPE html> <html> <head> <title></ ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

paip.jquery ajax 请求JSON数据填充SELECT全过程纪录

paip.jquery ajax 请求JSON数据填充SELECT全过程纪录相关推荐

最新文章

热门文章