演示jQuery中的Ajax提交方式提交多个参数

最新推荐文章于 2021-09-01 21:13:14 发布

青眼酷白龙

最新推荐文章于 2021-09-01 21:13:14 发布

阅读量864

点赞数 1

分类专栏： jQuery 文章标签： jquery ajax js java

本文链接：https://blog.csdn.net/qq_36382679/article/details/105643418

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示jQuery中的Ajax提交方式  提交多个参数</title>

    <!--引入jQuery文件, 个别同学的电脑, 可能IDEA中的JavaWeb项目默认不支持jQuery, 需要配置一下.-->
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        //1. 页面加载事件
        $(function () {
            //2. 给btn按钮绑定一个单击事件
            $("#btn").click(function () {
                //3. 通过jQuery的ajax, 采用get方式给后台的AjaxGetServlet发送数据.
                //细节: 获取要提交的数据
                var username = $("#uid").val();
                var password = $("#pw").val();

                //采用$.ajax()的方式提交数据, 细节: ajax中写的内容必须适合: json字符字符串格式.
                $.ajax({
                    type: "get",                    //表示提交数据的方式, get, post
                    url: "/day04/AjaxServlet",      //表示数据提交到哪里.
                    //提交多个参数, 写法1: 就是字符串拼接
                    //data: "username=" + username + "&password=" + password,   //表示具体提交的参数信息.

                    //提交多个参数, 写法2: json字符串
                    data: {"username":username, "password": password},   //表示具体提交的参数信息.
                    success: function (data) {      //提交数据成功后, 后台返回的回执信息.
                        alert(data)
                    }
                })
            })
        })

    </script>
</head>
<body>
    用户名: <input type="text" name="username" id="uid"/>  <br/>
    密&nbsp;码:<input type="text" name="password" id="pw"/> <br/>
<input type="button" value="JQuery的Ajax提交方式(ajax提交)" id="btn"/>
</body>
</html>

青眼酷白龙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
演示jQuery中的Ajax提交方式提交多个参数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>演示jQuery中的Ajax提交方式提交多个参数</title> <!--引入jQuery文件, 个别同学的电脑, 可能IDEA中的JavaWeb项目默...
复制链接

扫一扫