jQuery之ajax的网络请求

最新推荐文章于 2024-02-08 09:54:56 发布

QM_姚丹

最新推荐文章于 2024-02-08 09:54:56 发布

阅读量1.2k

点赞数

分类专栏： # html+css+js

本文链接：https://blog.csdn.net/qq_34475058/article/details/79760880

版权

html+css+js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我们写前端可以用form表单来进行get和post请求，但是效果可能不太好。
1. 导入jquery
2. 设置登陆按钮的点击事件
3. 获取参数
4. 设置请求链接
5. 添加参数
6. 获取返回的值
注意，由于我在本机模拟的请求，请求的接口的ip地址为192.168.1.120，所以前端页面访问时不能为localhost或者127.0.0.1
下面时前端代码，为Get和Post的有参请求

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>登陆</title>
        <!--第一步导入jquery-->
        <script src="lib/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .divForm {
                position: absolute;
                /*绝对定位*/
                width: 300px;
                height: 200px;
                text-align: center;
                /*(让div中的内容居中)*/
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -150px;
            }
        </style>
    </head>

    <body>

        <div class="divForm">
            <h2 align="center">欢迎来到姚丹交流网站</h2>

                <font>账号</font>&nbsp;&nbsp;<input id="nameId" type="text" name="username" />
                <br/><br/>
                <font>密码</font>&nbsp;&nbsp;<input id="pwdId" type="password" name="password" />
                <br/><br/>
                <input type="radio" name="status" value="user" checked="checked" />用户 &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="status" value="manager" />管理员
                <br/><br/>
                <!-- 点击图片就可以提交 -->
                <br/><br/>
                <input align="right" type="button" value="登陆" id="loginId" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" value="注册" />


        </div>

    </body>
    <script type="text/javascript">
        //ajax的代码
        var btn=$('#loginId'); //获取登陆按钮
        btn.click(function () {             //登陆按钮的点击事件
            var name=$('#nameId').val();   //获取账号的值
            var pwd=$('#pwdId').val();     //获取密码
            $.post('http://192.168.1.120/StudentManage/jsdemo.php',        //请求的接口的地址，如果get请求直接修改post为get，下面为参数
            {
                username:name,                                          //请求参数，key为username 值为name
                password:pwd                                            //请求参数
            },
            function (data,status) {                                    //返回状态,data为返回的json数据，status为请求完成的状态值
                alert(data+"--"+status);
            });
        });
    </script>
</html>

下面时php接口代码

<?php
    $username=$_POST["username"];     //调用php的$_POST[]方法，里面为请求的参数，
    $password=$_POST["password"];     //如果前端为get请求，就把$_POST[]换成$_GET[]
    echo("请求成功")                   //打印出返回的值
?>

下面时ajax无参的get请求

<script type="text/javascript">
        var btn=$('#loginId'); //获取登陆按钮
        btn.click(function () {             //登陆按钮的点击事件
            $.get('http://192.168.1.120/StudentManage/jsdemo.php',     //请求的接口的地址
            function (data,status) {                                    //返回状态,data为返回的json数据，status为请求完成的状态值
                alert(data+"--"+status);
            });
        });
    </script>

QM_姚丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之ajax的网络请求

我们写前端可以用form表单来进行get和post请求，但是效果可能不太好。 1. 导入jquery 2. 设置登陆按钮的点击事件 3. 获取参数 4. 设置请求链接 5. 添加参数 6. 获取返回的值注意，由于我在本机模拟的请求，请求的接口的ip地址为192.168.1.120，所以前端页面访问时不能为localhost或者127.0.0.1 下面时前端代码，为Get和Post...
复制链接

扫一扫

专栏目录