Ajax中post用法的demo

最新推荐文章于 2023-07-17 11:54:28 发布

咩有猫腻.

最新推荐文章于 2023-07-17 11:54:28 发布

阅读量573

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/DcTbnk/article/details/105718431

版权

Ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.ajax_post_demo1

html

<body>
    <h1>使用post方式向php发送请求,并且携带参数</h1>
    账号 : <input type="text"><br>
    密码 : <input type="password"><br>
    <button>请求</button>
    
    <script>
        // 通过post方式向PHP文件发送请求
        // 通过button的点击事件,完成操作

        // 1,获取标签对象

        const oBtn = document.querySelector('button');

        // 2,添加点击事件
        oBtn.addEventListener('click' , ()=>{
            // 1,获取数据
            let regname = document.querySelectorAll('input')[0].value;
            let regpwd = document.querySelectorAll('input')[1].value;

            // 2,以post方式发送
            
            // 创建ajax实例化对象
            const xhr = new XMLHttpRequest();

            // 设定ajax请求相关信息
            xhr.open('post' , './ajax5.php');

            // get方式请求,只需要在请求对象地址后,拼接参数即可
            // post方式请求,参数,实际上是写在请求体当中,需要做相关的设定

            // 设定相应的请求头中的内容,定义的post请求方式,发送数据
            // 是ajax请求的固定语法

            // 不写请求头,请求也能发送,但是请求体中,无法正确解析参数
            // 后台PHP程序,无法正常接收参数

            // 4,定义请求头
            xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

            // 5,发送请求
            // 此时post方式,在send()中,定义参数
            // 语法形式:字符串形式, '键名=数值&键名=数值...'
            // 也是键值对形式,多个键值对以&符号做链接
            xhr.send(`regname=${regname}&regpwd=${regpwd}`);
            
            // 参数不能是对象形式,只能是字符串形式
            // xhr.send( {regname:regname , regpwd:regpwd} );

            // 6,接收响应体
            xhr.onload = function(){
                console.log(xhr);
            }
        })

    </script>

php

<?php

echo json_encode($_POST);

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax中post用法的demo

一.ajax_post_demo1html<body> <h1>使用post方式向php发送请求,并且携带参数</h1> 账号 : <input type="text"><br> 密码 : <input type="password"><br> <button>请求&...
复制链接

扫一扫

专栏目录