java十四 json ajax jquery异步请求(2020.10.23)_jquery异步请求java,带json参数-CSDN博客

本文介绍了JavaScript的两种加载方式及示例，详细讲解了Ajax的基本结构、参数设置及使用方法，并提供了具体的遍历示例。此外，还展示了如何将查询结果以JSON格式返回。

1.js两种加载方式和导包

fastjson-1.2.29.jar(阿里巴巴的fajson，网上自行百度下载或私聊我)
本地加载：

把js文件放入项目
在这里插入图片描述

	<%--js本地加载--%>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>

2.js网上地址加载

    <%--js网上地址加载--%>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

例子:

前台form表单select下拉框传值

<form action="">
        <tr>
            <td>员工名:</td>
            <td>
                <input type="text" name="ename">
            </td>
            <td>
                <select name="did" id="did">
                    <option value="0                                                    ">请选择</option>
                </select>
            </td>
            <td>
                <input type="submit" value="查询">
            </td>
        </tr>
    </form>

=================================================================
Ajax结构参数介绍
url:请求方法
type:方法类型post或get
data:携带参数数据可选
datatype:后台处理过返回的数据类型Json script
success:function(rs){rs:处理后台成功返回的结果内容
方法返回成功后执行的内容
}
写法:

<script type="text/javascript">
        //页面和方法加载完毕
        $(function () {
            $.ajax({
                url:'/servlet类名?method=方法名',
                type:'POST',
                // data:','
                dataType:'Json',
                success:function (rs) {
                }
			});
        });
    </script>

ajax的遍历(在上文success:function (rs) { }中写此处单独拿出解释)

index:索引
item:上文提到的返回的rs遍历后的对象名称
append:添加把值添加到option下拉框中
方法一:

$(rs).each(function (index,item) {
	$('#did').append("<option value='"+item.did+"'>"+item.dname+"</option>");
});

方法二:

$.each(rs,function (index,item){
          //把value填入option中
          $('#did').append("<option value='"+item.did+"'>"+item.dname+"</option>");
        });

后台

转为json类型通过打印类输出到前台ajax接受

    //查询所有dept
    private void showAllDept(HttpServletRequest request, HttpServletResponse response) throws SQLException, ServletException, IOException {
        List<Dept> depts = new DeptDaoImpl().getAllDept();
        //调用阿里巴巴的fajson转为json类型
        String jsonString = JSON.toJSONString(depts);
        //打印类
        //json数据: {k:v,k:v}
        PrintWriter writer = response.getWriter();
        writer.print(jsonString);
    }