jQuery,ajax,实现前后台数据对接（——登录页面）

最新推荐文章于 2022-11-01 10:22:40 发布

原创最新推荐文章于 2022-11-01 10:22:40 发布 · 4.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery

ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML创建表单并结合jQuery AJAX进行数据异步提交的例子。通过这个示例，读者可以了解如何在不刷新页面的情况下将表单数据发送到服务器。

html表单代码

<form id="form1">
            <div class="user">
                <img src="images/user.png" alt=""/>
                <input type="text" name="user_username" id="user"/>
            </div>
            <div class="pwd">
                <img src="images/pwd.png" alt=""/>
                <input type="password" name="user_password" id="pwd"/>
                <i class="by"></i>
            </div>
            <input type="button" value="登录" id="sub"/>
        </form>

jQuery代码

 $("#sub").on("click",function(){
        var formParam = $("#form1").serialize();
        $.ajax({                     
            async:false,　　　　　　　
            url:"test.php",            //引号内为处理数据的代码地址，如果是php就是test.php
            type:"post",
            data:formParam,
            dataType:"json",
            success: function(data){
                alert("1");
            }
        });
    });

下面是效果

在这里插入图片描述