• ajax传参


          // ajax传参
            // ajax传参特点:
            //   1,不需要跳转
            //   2,ajax传参,都是异步程序
            //     不影响同步程序的执行
            //     即使请求交互没有完成,其他程序也可以正常执行
            // ajax:
            //  async       异步
            //  JavaScript 
            //  and
            //  XML
            //  一个异步的 JavaScript 和 XML 的数据交互

            // ajax 的基本步骤和过程

            // 1, 需要创建一个 ajax 对象
            //    const xhr = new XMLHttpRequest();

            // 2, 配置请求内容和数据
            //    xhr.open( '请求方式get/post' , '请求地址?键名=数值&键名=数值' );
            //        get方式可以在 请求地址之后直接拼接传参的键值对
            //        post方式在 open 中 只定义 请求url地址
            //       

            // 3, 发送请求
            //   xhr.send();

            //   post 请求 在 send() 阶段 来定义参数
            //   (1),定义 请求头 信息
            //   xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
            
            //   (2),定义 参数
            //   xhr.send(以字符串形式传递参数)
            //   xhr.send('name=张三&age=18')   字符串是键值对形式,多个键值对以&符号间隔
            //   xhr.send({name:'张三' , age:18})


            // 4, 接收请求结果,响应体内容
            //   xhr.onload = function(){}
     
    oBtn.addEventListener('click' , ()=>{
                // 点击时,先获取数据,在发送ajax请求给PHP程序

                // 获取数据
                let val1 = oIpt1.value;
                let val2 = oIpt2.value;

                // 1,创建 ajax对象
                const xhr = new XMLHttpRequest();

                // 2,设定 ajax传参对象和数据
                xhr.open('get' , `./get.php?userName=${val1}&userPwd=${val2}`);

                // 3,发送ajax请求
                xhr.send();

                // 4,接收请求响应体
                xhr.onload = function(){
                    // 响应体内容 存储在 response 或者 responseText 中
                    // 一般后端返回的响应体都是json串格式,需要还原成json串格式
                    console.log(xhr.response);
                    console.log( JSON.parse(xhr.response) );
                }
            })
     
    <?php

    // 1,php接收参数

    $userName = $_POST['userName'];
    $userPwd = $_POST['userPwd'];

    // 2,PHP需要操作数据库
    // 通过 PHP提供的 mysqli 函数方法来操作数据库
    // 本质也是通过SQL语句来操作数据库,只是执行是通过PHP程序执行

    // 2-1链接MySQL数据库服务器
    //                      数据库地址     账号     密码      库名       端口号
    $link = mysqli_connect( '127.0.0.1' , 'root' , 'root' , 'nz2003' , 3306 );

    // 2-2定义SQL语句
    $sql = "INSERT INTO `user` (`username` , `userpwd`) VALUES ( '{$userName}' , '$userPwd' ) ";

    // 2-3执行SQL语句
    // 第一个参数 : 链接的数据库信息
    // 第二个参数 : 要执行的SQL语句

    // 非查询语句,执行结果 是 布尔类型
    $result = mysqli_query( $link , $sql );

    // 会根据执行结果,返回信息
    // 返回内容都是比较复杂的内容

    if($result){
        $arr = [
            'res' => '1',
            'msg' => '注册成功',
        ];
    }else{
        $arr = [
            'res' => '0',
            'msg' => '注册失败,用户名重复',
        ];
    }


    echo  json_encode($arr);
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    180726-InfluxDB基本概念小结
    180725-InfluxDB-v1.6.0安装和简单使用小结
    zepto的tap事件的点透问题的几种解决方案
    ZeroclipboardJS+flash实现将内容复制到剪贴板实例
    HighchartsJS创建点状带标识的图表实例
    HighchartsJS创建环形带标识的图表实例
    Bootstrap 4上线啦!!!
    jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
    如何通过js和jquery获取图片真实的宽度和高度
    js判断图片加载完成后获取图片实际宽高
  • 原文地址:https://www.cnblogs.com/ht955/p/14109548.html
Copyright © 2020-2023  润新知