Ajax

作者: wanggs | 来源:发表于2017-10-26 16:39 被阅读0次

请求方式

ajax
$.ajax({
                        url : "/login",
                        type : "post",
                        data : $("#loginForm").serialize(),
                        beforeSend:function(){
                            $("#loginBtn").append($("<i class='fa fa-spinner fa-spin'></i>")).attr("disabled","disabled");
                        },
                        complete:function(){
                            $("#loginBtn").html("登录").removeAttr("disabled");
                        },
                        success : function(data) {
                            if(data.state == "error") {
                                alert(data.message);
                            } else {
                                window.location.href = "/jq/demo1.jsp";
                            }
                        },
                        error : function() {
                            alert("服务器错误");
                        }
                    });
post
 $("#loginBtn").click(function(){
                var username = $("#username").val();
                var password = $("#password").val();

                //alert($("#loginForm").serialize());

                $.post("/login",$("#loginForm").serialize()).done(function(data){
                    if(data.state == "error") {
                        alert(data.message);
                    } else {
                        window.location.href = "/jq/demo1.jsp";
                    }
                }).error(function(){
                    alert("服务器异常");
                });
            })
get
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<input type="text" id="username">
<span id="loding" style="display: none">![](/static/img/loding.gif)</span>
<span id="text"></span>

<script src="/static/js/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        $(document).ajaxSend(function(){
            $("#loding").show();
        });
        $(document).ajaxComplete(function(){
            $("#loding").hide();
        });

        $("#username").blur(function(){
            var name = $(this).val();

            $.get("/ajax",{"name":"ajax"},function(data){
                alert(data);
            });

            /*$.post("/ajaxs",{"name":name,"age":23})
                .done(function(data){
                    $("#text").text(data);
                })
                .error(function(){
                    alert("服务器端错误");
                });*/



            /*$.ajax({
                url : "/ajax",
                type : "post",
                data : {"name":name,"age":23},
                timeout : 15000,
                beforeSend : function(){
                    //请求发送之前做的函数
                    $("#loding").show();
                    $("#text").text("");
                },
                success : function(data){
                    $("#text").text(data);
                },
                error : function(){
                    alert("服务器异常");
                },
                complete : function(){
                    //无论success还是error都会执行
                    $("#loding").hide();
                }
            });*/


        });
    });
</script>
</body>
</html>

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

    本文标题:Ajax

    本文链接:https://www.haomeiwen.com/subject/phpkpxtx.html