jQuery ajax

最新推荐文章于 2022-07-20 09:29:36 发布
最新推荐文章于 2022-07-20 09:29:36 发布
阅读量329 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/82913243
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="UTF-8">

<title>jQuery DOM编程</title>

    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

    <script type="text/javascript" src="dom.js"></script>

    <style type="text/css">

        .other{

            background-color: green;

            font-size: 20px;

        }

        .mybtn{

            background-color: yellow;

        }

    </style>

</head>

<body>

    

     <input type="button"  class="other" id="btn_clone" value="clone(test)" myattr="myValue"/> <br/>

    

    <b id="b1" style="background-color: gray;">hello</b>

    <div id="div1" name="div1" style="background-color: orange;">div1</div>

    <div id="div2" name="div2" style="background-color: yellow;">div2</div>

    

    

    <input type="button" id="btn"

         style="background-color: blue;color: white;" value="删除我">

    

    <ul id="ul">

        <li>item1</li>

        <li>item2</li>

        <li>item3</li>

        <li>item4</li>

        <li>item5</li>

    </ul>

    

    <fieldset>

        <legend>内部插入节点(插入子节点)</legend>

        <input value="append" type="button" id="test_append"/>

        <input value="appendTo" type="button" id="test_appendTo"/>

        <input value="prepend" type="button" id="test_prepend"/>

        <input value="prependTo" type="button" id="test_prependTo"/>

    </fieldset>

    

    <fieldset>

        <legend>外部插入节点(插入兄弟节点)</legend>

        <input value="after" type="button" id="test_after"/>

        <input value="before" type="button" id="test_before"/>

        <input value="insertAfter" type="button" id="test_insertAfter"/>

        <input value="insertBefore" type="button" id="test_insertBefore"/>

    </fieldset>

        

    <fieldset>

        <legend>jquery删除节点</legend>

        <input type="button" id="test_removeNode" value="删除节点" />

        <input type="button" id="test_emptyNode" value="删除子节点" />

    </fieldset>

    

    <fieldset>

        <legend>jquery克隆节点,替换节点</legend>

        <input type="button" id="test_clone" value="克隆节点" />

        <input type="button" id="test_replace1" value="替换节点" />

        <input type="button" id="test_replace2" value="替换节点" myattr="myValue"/>

    </fieldset>

    

    <fieldset>

        <legend>jquery属性操作</legend>

        <input type="button" id="test_getterAttr" value="获取属性值"/>

        <input type="button" id="test_setterAttr" value="设置属性值"/>

    </fieldset>

    

    <fieldset>

        <legend>jquery CSS操作</legend>

        <input type="button" id="test_addClass" value="添加Css"/>

        <input type="button" id="test_removeClass" value="删除Css"/>

        <input type="button" id="test_togggleClass" value="轮换Css"/>

        <input type="button" id="test_hasClass" value="判读是否存在Css"/>

    </fieldset>

</body>

</html>

 

 

 

 

$(function(){

        $("#test_append").click(function(){

        $("#ul").append($("#div1"));

    })

    $("#test_appendTo").click(function(){

     $("#ul").appendTo($("#div2"));

    })

    $("#test_prepend").click(function(){

     

     $("#ul").prepend($("#div1"));

    })

     $("#test_prependTo").click(function(){

     

     $("#ul").prependTo($("#div2"));

    })

    $("#test_after").click(function(){

     $("#b1").after($("#div1")).css("background","green");

    })

    $("#test_before").click(function(){

     $("#b1").before($("#div2")).css("background","orange");

    })

     $("#test_insertAfter").click(function(){

     $("#b1").insertAfter($("#div1")).css("background","yellow");

    })

    $("#test_insertBefore").click(function(){

     $("#b1").insertBefore($("#div2")).css("background","pink");

    })

    $("#test_emptyNode").click(function(){

     $("#ul").remove();//第一种方式

     /*$("#ul").empty();*///第二种方式

     /*$("#ul").detach();*///第三种方式

    })

    $("#test_removeNode").click(function(){

     var res=$("#btn").remove();

     res.insertAfter($("#ul"));

    })

    $("#btn_clone").click(function(){

     alert("请点击我！！");

    })

     $("#test_clone").click(function(){

     var res=$("#btn_clone").clone();

        res.insertAfter($("#ul"));

    })

    $("#test_replace1").click(function(){

     $(":button").replaceWith("<b>SB</b>");

    })

     $("#test_replace2").click(function(){

     $(":button").replaceAll("<b>SB</b>");

    })

    $("#test_getterAttr").click(function(){

     console.debug($("div").attr("name"));

    })

    $("#test_setterAttr").click(function(){

     /*

     $("div").attr("name",function(){

         console.debug(arguments);

     })*/

     

     $("div").attr("name",function(index,arrvalue){

         console.debug(arguments);

         return arrvalue+"fdasdfa";

     });

    })

    $("#test_addClass").click(function(){

     $(":button").addClass("other");

    })

    $("#test_removeClass").click(function(){

     $(":button").removeClass("other");

    })

    $("#test_togggleClass").click(function(){

     $(":button").toggleClass("other");

    })

    $("#test_hasClass").click(function(){

     console.debug($(":button").hasClass("other"));

    })

})

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="jqindex.js"></script>

</head>

<body>

    <h1 style="background-color:pink;font-family:微软雅黑;font-size:bold;color:orange;text-align:center;">失去焦点后的效果</h1><br>

    用户名：<input id="username" type="text"/>

    <span id="kongge"></span>

</body>

</html>

 

 

$(function(){

    $("#username").blur(function(){

        

        var username=$(this).val();

        

        $.get("/jqservlet?cmd=search&username="+username,function(data){

            

            if(data.success){

                $("#kongge").css("color","green").text(data.msg);

            }else{

                $("#kongge").css("color","red").text(data.msg);

            }

        },"json");

    })

})

 

 

package ajax;

 

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

 

@Data

@NoArgsConstructor

 

public class ajaxresult {

    private Boolean success=true;

    private String msg;

    public ajaxresult(String msg, Boolean success) {

        

        this.success = success;

        this.msg = msg;

    }

    

}

 

 

 

 

package ajax;

 

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Arrays;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.alibaba.fastjson.JSON;

@WebServlet("/jqservlet")

public class jqservlet extends HttpServlet{

 

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    private List<String>list=Arrays.asList("will","lucy");

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // TODO Auto-generated method stub

        req.setCharacterEncoding("UTF-8");

        resp.setContentType("text/json;charset=UTF-8");

        String cmd=req.getParameter("cmd");

        

        if(cmd.equals("search")) {

            

            search(req, resp);

        }

    }

    protected void search(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String username=req.getParameter("username");

        Map<String, Object>jsonmap=new HashMap<>();

        PrintWriter out=resp.getWriter();

        if(list.contains(username)) {

            jsonmap.put("success", false);

            jsonmap.put("msg","对不起，"+ username +"已经注册过了！！");

        }else {

            jsonmap.put("success", true);

            jsonmap.put("msg","恭喜你，"+ username +"成功注册！！");

        }

        out.print(JSON.toJSONString(jsonmap));

    }

}

 

 

 

 

 

 

 

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="login.js"></script>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

    <span id="kong"></span><br>

    用户名：<input id="username" type="text"/><br>

    密码：<input id="password" type="text"/><br>

    <input id="tijiao" type="button" value="jQajax登录"/>

</body>

</html>

 

 

 

$(function(){

    $("#tijiao").click(function(){

        var username=$("#username").val();

        var password=$("#password").val();

        $.post("/jqlogin?username="+username+"&password="+password,{username:username,password:password},function(data){

            if(data.success){

                window.location.href="jqindex.html"

            }else{

                console.debug(data.success);

                $("#kong").css("background-color","red").text(data.msg);

            }

        },"json");

    })

})

 

 

package ajax;

 

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.Map;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import com.alibaba.fastjson.JSON;

@WebServlet("/jqlogin")

public class jqlogin extends HttpServlet{

 

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // TODO Auto-generated method stub

        String username=req.getParameter("username");

        String password =req.getParameter("password");

        ajaxresult ajax=null;

        req.setCharacterEncoding("UTF-8");

        resp.setContentType("text/json;charset=UTF-8");    

        PrintWriter out=resp.getWriter();

        if("admin".equals(username)&&"123456".equals(password)) {

            ajax=new ajaxresult("",true);

        }else {

            ajax=new ajaxresult("用户名或者密码错误",false);

         }

        out.print(JSON.toJSONString(ajax));

    }

}

 

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="jqlinkage.js"></script>

</head>

<body>

    <select id="province">

        <option value=-1>请选择</option>

    </select>省

    

    <select id="city">

        <option value=-1>请选择</option>

    </select>市

</body>

</html>

 

 

$(function(){

    $.get("/jqlinkage?cmd=firstlist",function(data){

        $.each(data,function(index,item){

            console.debug(item);

            $("#province").append("<option value="+ item.id +">"+item.name+"</option>");

        })

    },"json")

    $("#province").change(function(){

        var pid=$(this).val();

        

        if(pid<0)

            return;

        var param={pid:pid};

        

        $.post("/jqlinkage?cmd=secondlist&pid="+pid,param,function(data){

            $("#city").text("<option value='-1'>请选择</option>");

            $("#city").append("<option value='-1'>请选择</option>");

            $.each(data,function(index,item){

                $("#city").append("<option value="+ item.id +">"+item.name+"</option>");

            })

        },"json")

    })

})

 

 

package ajax;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import lei.City;

import lei.Province;

@WebServlet("/jqlinkage")

public class jqlinkage extends HttpServlet{

    /**

     *

     */

    private static final long serialVersionUID = 1L;

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // TODO Auto-generated method stub

        req.setCharacterEncoding("UTF-8");

        resp.setContentType("text/json;charset=UTF-8");

        String cmd=req.getParameter("cmd");

        if(cmd.equals("firstlist")) {

            firstlist(req, resp);

        }else {

            secondlist(req, resp);

        }

    }

    protected void firstlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        PrintWriter out=resp.getWriter();

        List<Province>list=Province.getAllProvince();

        out.print(JSON.toJSONString(list));

    }

    protected void secondlist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        

        PrintWriter out=resp.getWriter();

        String pid=req.getParameter("pid");

        List<City>list=City.getCityByProvinceId(Long.valueOf(pid));

        out.print(JSON.toJSONString(list));

    }

}

    

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript " src="jquery-1.11.2.min.js"></script>

<script type="text/javascript " src="checkbox.js"></script>

<title>checkbox</title>

</head>

<body>

    请选择你的爱好:<br/>

    <input type="checkbox" id="checkAll"/>全选/全不选<br/>

    <div>

        <input type="checkbox" name="hobby"/>打篮球&nbsp;

        <input type="checkbox" name="hobby"/>踢足球&nbsp;

        <input type="checkbox" name="hobby"/>上网&nbsp;

    </div>

    

    <div>

        <input type="button" id="btn_checkAll" οnclick="checkAll(true)" value="全选"/>

        <input type="button" οnclick="checkAll(false)" value="全不选"/>

        <input type="button" οnclick="checkUnAll()" value="反选"/>

    </div>

</body>

</html>

 

 

function checkAll(checked){

    $(":input[name=hobby]").prop("checked",checked);

}

function checkUnAll(){

    $(":input[name=hobby]").prop("checked",function(index,value){

        return !value;

    });

}

$(function(){

    $("#checkAll").click(function(){

        checkAll(this.checked);

    })

})

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户新增</title>

    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

    <script type="text/javascript" src="select.js"></script>

</head>

<body>

    <table border="1">

        <tr>

            <td>

                <select id="select1" style="width:100px" size="10" multiple="multiple">

                    <option value="选项1">选项1</option>

                    <option value="选项2">选项2</option>

                    <option value="选项3">选项3</option>

                    <option value="选项4">选项4</option>

                    <option value="选项5">选项5</option>

                    <option value="选项6">选项6</option>

                    <option value="选项7">选项7</option>

                    <option value="选项8">选项8</option>

                    <option value="选项9">选项9</option>

                </select>

            </td>

            <td align="center">

                <input type="button" οnclick="sel1AddTosel2('select1','select2')" value="-->"/><br/>

                <input type="button" οnclick="sel1AddAllTosel2('select1','select2')" value="==>"/><br/>

                <input type="button" οnclick="sel1AddTosel2('select2','select1')" value="<--"/><br/>

                <input type="button" οnclick="sel1AddAllTosel2('select2','select1')" value="<=="/>

            </td>

            <td>

                <select id="select2" style="width:100px" size="10" multiple="multiple"></select>

            </td>

        </tr>

    </table>

</body>

</html>

 

 

 

function sel1AddAllTosel2(init,target){

    $("#"+init+" option").appendTo($("#"+target));

}

function sel1AddTosel2(init,target){

    $("#"+init+" option:selected").appendTo($("#"+target));

}

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户新增</title>

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="user.js"></script>

</head>

<body>

    <form name="userForm">

        <center>

            用户录入<br/>

            用户名:<input id="username" name="username" type="text" size=15/>

            E-mail:<input  id="email" name="email" type="text"  size=15/>

            电话:<input id="tel" name="tel" type="text" size=15/>

            <input type="button" value="添加" id="btn_submit"/>

            <input type="button" value="删除所有" id="btn_removeAll"/>

        </center>

    </form>

    <hr/>

    <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>

        <thead>

            <tr>

                <th>用户名</th>

                <th>E-mail</th>

                <th>电话</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody id="userTbody">

            <tr>

                <td>乔峰</td>

                <td>qiao@163.com</td>

                <td>18212345678</td>

                <td><a href='#'>删除</a></td>

            </tr>

        </tbody>

    </table>

    

    

</body>

</html>

 

 

 

$(function(){

    $("#btn_submit").click(function(){

        var username=$("input[name=username]").val();

        var email=$("input[name=email]").val();

        var tel=$("input[name=tel]").val();

        var id=new Date().getTime();

        var tr="<tr id="+id+"><td>"+ username +"</td><td>"+ email +"</td><td>"+ tel +"</td><td><a href='javascript:deleteuser("+id+")'>删除</a></td></tr>";

        $("#userTbody").append(tr);

    })

    $("#btn_removeAll").click(function(){

        $("#userTbody").empty();

    })

})

function deleteuser(id){

    $("#"+id).remove();

}

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户新增</title>

    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

    <script type="text/javascript" src="item.js"></script>

</head>

<body>

    <input type="button" id="addMoreItem" value="添加更多"/>

    <table border="1" cellpadding=0 cellspacing=0 width=400>

        <thead>

            <tr>

                <th>商品名称</th>

                <th>单价</th>

                <th>数量</th>

                <th>小计</th>

            </tr>

        </thead>

        <tbody id="productTbody">

            <tr>

                <td>

                    <select>

                        <option>电脑</option>

                        <option>平板</option>

                        <option>手机</option>

                    </select>

                </td>

                <td><input type="text" name="price"/></td>

                <td><input type="text" name="number"/></td>

                <td id="total">0</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

 

 

 

 

$(function(){

    $("#addMoreItem").click(function(){

        var copy=$("#productTbody tr:first").clone();

        copy.find("input[name=price]").val("");

        copy.find("input[name=number]").val("");

        $("#total").text("");

        copy.appendTo($("#productTbody"));

    })

    $("input[name=price],input[name=number]").change(function(){

        var price=$("input[name=price]").val();

        var number=$("input[name=number]").val();

        if(price&&number){

            $("#total").text(price*number);

        }

    })

})

 

 

 

 

zhouzhou_98
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery ajax提交
lxlpokie的博客
06-07 164
&lt;script&gt;            $(function(){                $("#submit").on('click',function(){                    $.ajax({                        type: 'POST',                        url: "{:url('admin/up...
ajax——用ajax写登陆页面
weixin_33720078的博客
02-21 549
ajax.php &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he...
jquery-1.11.2.min.js
02-06
jquery-1.11.2.min.js，大家就不用找了，方便大家下载
适用于jquery1.11.1的ajaxfileupload.js
12-05 106
ajaxfileupload源码 解决上传成功不走success的问题 解决高版本jquery兼容性问题 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; ...
jQuery AJAX应用实例总结
01-19
本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下： AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML（标准通用标记语言的子集）。 AJAX是一种用于创建快速动态网页的...
Jquery ajax请求导出Excel表格的实现代码
10-22
下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
当jquery ajax遇上401请求的解决方法
10-22
下面小编就为大家带来一篇当jquery ajax遇上401请求的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Jquery 1.11.2
02-12
从Jquery官网下载的Jquery 1.11.2文件，包括jquery-1.11.2.min.js、jquery-1.11.2.min.map和jquery-1.11.2.js，供有需要但网速太慢的童鞋下载
cav.js和jquery-1.11.2.min.js
02-12
cav.js和jquery-1.11.2.min.js 用于案例下载，案例地址：https://blog.csdn.net/qq_33538554/article/details/87089557
jquery1.11.2
02-24
jQuery JavaScript Library v1.11.2.
jquery-1.11.3.js+jquery.min.js
03-10
jquery-1.11.3.js+jquery.min.js jquery-1.11.3.js+jquery.min.js
jquery-1.11.2.zip
05-19
Write less do more!jQuery就是强大,欢迎下载！
jQuery AJAX 方法
12-13
jQuery AJAX 方法 jQuery AJAX 方法 AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。 下面的表格列出了所有的 jQuery AJAX 方法： 方法 描述 $.ajax() 执行异步 AJAX ...
jquery ajax 向后台传递数组参数示例
10-27
在JS中向后台传递数组参数，如果数组中放的是对象类型，传递到后台是显示的只能是对象字符串--[object Object],具体的原因及解决方法如下，有类似问题的朋友可以参考下
jquery从1.3.2升级到1.11.1后，$.ajax提交数组的设置
xuxiaolei的专栏
05-24 1725
在对一个老的项目添加新功能，
【jQuery】jQuery中如何发送ajax请求以及解决跨域问题_10
青春木鱼的博客
07-20 2707
jQuery中使用$.ajax()函数一句话向服务器发送请求接收响应；jsonp不会对服务器端代码或者内容做更改，因为它只能也只支持发送get请求
jqueryajax
最新发布
08-28
jQuery Ajax是一种用于在Web应用程序中进行异步请求的JavaScript库。它提供了一种简单的方法来向服务器发送HTTP请求并获取响应，而无需重新加载整个页面。使用jQuery Ajax，您可以执行各种操作，如获取数据、发送...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值