JqueryAjax的基本使用 登录 下拉列表框 修改 删除 全选全不选 删除选中 添加 响应

基本用法：

type请求类型
url地址
data传参 

data序列化传参传：data:$("form").serialize()，传form是表单名，传到后端的是form表单内input的value值，传值是name名 =value属性名，要传其它值可以用隐藏域<input type="hidden" name="name名" value="value值"/>，也可以直接在后面通过传值是name名=value属性名拼接。

data直接传参：

1.data:{"name1":value1,"name2",value2...},引号可以去掉

2.data:"page="+page+"&size="+size

3.var a="aaa";
   data:a,

success:function(result):result是ajax得到的结果

登录：

$("#button1").unbind("click").bind("click",function () {
                //发送异步ajax查询账号密码信息
                $.ajax({
                    type:"get",
                    url:"查询账号密码地址",
                    data:$("form").serialize(),//用jquery将表单序列化,将表单中数据以name=value&name=value传给后台
                    success:function (result) {
                        //将响应json串转换json对象
                        var resultdto=eval("("+result+")");
                        if (resultdto.code==1){
                            alert("登录成功!");
                            window.location="登录主页面";
                        }
                    }
                });

            })

下拉列表框选中：

//在页面加载时,发送异步ajax请求所有部门信息
            $.ajax({
                    type:"get",
                    url:"/dept/selectAllDept.action",
                    success:function (result) {
                        //将响应json串转换json对象数组
                        var deptList=eval("("+result+")");
                        //获得下拉框对象
                        var deptid=$("#deptid");

                        //遍历部门信息,将部门信息动态绑定到下拉列表框中,部门编号作value值,部门名称显示给用户看
                        for (var i=0;i<deptList.length;i++){
                            //如果当前遍历部门信息与我当前修改员工部门信息相同,就要选中
                            if(${emp.dept.deptid}==deptList[i].deptid){
                                deptid.html(deptid.html()+"<option selected='selected' value='"+deptList[i].deptid+"'>"+deptList[i].dname+"</option>");
                            }else{
                                deptid.html(deptid.html()+"<option value='"+deptList[i].deptid+"'>"+deptList[i].dname+"</option>");
                            }

                        }
                    }
            });

---

修改：

//点击修改员工操作
            $("#update1").unbind("click").bind("click",function () {
                //发送异步ajax请求添加员工信息
                $.ajax({
                    type:"get",
                    url:"/emp/updateEmp.action",
                    data:$("form").serialize(),//用jquery将表单序列化,将表单中数据以name=value&name=value传给后台
                    success:function (result) {
                        //将响应json串转换json对象
                        var resultdto=eval("("+result+")");
                        if (resultdto.code==1){
                            alert("修改成功!");
                            window.location="/emp/selectEmpByPage.action?curr=1";//window.location成功后跳转的路径，？后面是传过去的参数
                        }
                    }
                });

            })
 

---

删除：

//点击添加员工操作
            $(".delOne").unbind("click").bind("click",function () {
                //获得当前要删除员工编号
                var empid=$(this).parent().prev().prev().prev().prev().html();
                //alert("删除的员工编号为:"+empid);
                var aa=confirm("确定删除吗?")
                if(aa){
                    //发送异步ajax请求删除员工信息
                    $.ajax({
                        type:"get",
                        url:"/emp/deleteEmp.action",
                        data:{"empid":empid},
                        success:function (result) {
                            //将响应json串转换json对象
                            var resultdto=eval("("+result+")");
                            if (resultdto.code==1){
                                alert("删除成功!");
                                window.location="/emp/selectEmpByPage.action?curr=1";//window.location成功后跳转的路径，？后面是传过去的参数
                            }
                        }
                    });
                }
            })

---

全选全不选：

//全选全不选
            $("#all").change(function () {
                $("input[name='empids']").prop("checked", $("#all").prop("checked"));
            });

---

删除选中：

//删除选中
            $("#deleteSelect").unbind("click").bind("click",function () {
                //获得所有选中多选框
                var empids=$("input:checked").not($("#all"));
                var aa=confirm("确定要删除吗?")
                if(aa){
                    if(empids.length==0){
                        alert("你还没有选中项,无法删除!");
                    }else{
                        //声明变量存要删除的编号
                        var ids="";
                        //遍历所有多选框对象
                        empids.each(function (i,ob) {//i表示索引,ob表示遍历的每个多选框对象
                            if (i==empids.length-1){
                                ids=ids+"empid="+$(ob).val();
                            }else{
                                ids=ids+"empid="+$(ob).val()+"&";
                            }
                        });

                        alert("选中员工编号为:"+ids);
                        //发送异步ajax请求删除员工信息
                        $.ajax({
                            type:"get",
                            url:"/emp/deleteEmpArray.action",
                            data:ids,
                            success:function (result) {
                                //将响应json串转换json对象
                                var resultdto=eval("("+result+")");
                                if (resultdto.code>0){
                                    alert("删除成功!");
                                    window.location="/emp/selectEmpByPage.action?curr=1";//window.location成功后跳转的路径，？后面是传过去的参数
                                }
                            }
                        });

                    }
                }

            });
 

---

添加：

//点击添加员工操作
            $("#add1").unbind("click").bind("click",function () {
                //发送异步ajax请求添加员工信息
                $.ajax({
                    type:"get",
                    url:"/emp/addEmp.action",
                    data:$("form").serialize(),//用jquery将表单序列化,将表单中数据以name=value&name=value传给后台
                    success:function (result) {
                        //将响应json串转换json对象
                        var resultdto=eval("("+result+")");
                        if (resultdto.code==1){
                            alert("添加成功!");
                            window.location="/emp/selectEmpByPage.action?curr=1";//window.location成功后跳转的路径，？后面是传过去的参数
                        }
                    }
                });

            })

---

将结果通过json字符串响应给Ajax：

1.response.getWriter().write("{'属性名':"+值+"}");

2.  //将Java对象换json为字符串,再将json字符串返回
    String s2=JSON.toJSONString(对象);
    response.getWriter().write(s2);