ajax的内容

最新推荐文章于 2024-02-17 13:45:00 发布

weixin_30900589

最新推荐文章于 2024-02-17 13:45:00 发布

阅读量173

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/tangdiying/p/10439404.html

版权

ajax是什么？

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，可以局部刷新而不必整个页面整体刷新。

url的简单认识：

进入服务器的三种方式：

1.localhost：端口号（进入本机创建的服务器）

http://localhost:8888/

2.127.0.0.1：端口号（进入本机创建的服务器）

http://127.0.0.1:8888/

3.ip：端口号

http://192.168.9.105:8888/

上传数据到服务器的两种方法：

第一种通过form表单：

get方式

<h1>通过get方式提交表单</h1>
    <form action="05.php" method="GET">
        <input type="text" placeholder="请输入用户名" name="userName">
        <br>
        <input type="text" placeholder="请输入技能" name="userSkill">
        <br>
        <input type="submit">
        <button>提交</button>
        <!-- <input type="image" src=""> -->
    </form>

<?php
    echo "这个为get提交的页面";


    // $_GET[]   get提交方式从前台传递过来的数据

    echo "<br>";
    echo $_GET['userName'];
    echo "<br>";
    echo $_GET['userSkill'];
    echo "<br>";
    echo '<h1>'.$_GET['userName'].'欢迎你</h1>';   //在php中字符串拼接使用的是.
?>

post方式：

<h1>通过post方式提交表单</h1>
    <form action="06.php" method="POST">
        <input type="text" placeholder="请输入用户名" name="userName">
        <br>
        <input type="text" placeholder="请输入技能" name="userSkill">
        <br>
        <input type="submit">
        <button>提交</button>
        <!-- <input type="image" src=""> -->
    </form>

<?php
    echo "这个为get提交的页面";
    echo "<br>";
    echo $_POST['userName'];
    echo "<br>";
    echo $_POST['userSkill'];
    echo "<br>";
    echo '<h1>'.$_POST['userName'].'欢迎你</h1>';   //在php中字符串拼接使用的是.
?>

第二种通过ajax提交到后台

原生ajax get版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <script>
        // 一般情况下只能在有服务的环境下发送请求

        // ajax是局部刷新


        // 1.创建ajax对象-xmlhttprequest对象
        // XMLHttpRequest 对象

        // variable=new XMLHttpRequest();    新版本的浏览器
        // variable=new ActiveXObject("Microsoft.XMLHTTP");    //老版本的IE  ，IE5，IE6
        var xhr;
        if(window.XMLHttpRequest){    //常规，如果有，直接使用
            xhr = new XMLHttpRequest();
        }else{   //如果没有，老版本IE
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr)
        console.log("状态码:" + xhr.readyState);
        console.log('响应码：' + xhr.status);
        console.log('响应文本:' + xhr.responseText);
        console.log('步骤一完成')


        // 2.通过监听ajax的状态的改变来监听
        xhr.onreadystatechange = function(){
            console.log('xhr的状态码发生了改变');
            console.log("状态码:" + xhr.readyState);
            console.log('响应码：' + xhr.status);
            console.log('响应文本:' + xhr.responseText);
            console.log('\n');
        }
        console.log('步骤二完成')

        // 3.创建请求的消息，连接服务器      状态码0=>1
        xhr.open('GET','07.php',true);    //最后一个参数是bool，表示同步||异步，true异步
        console.log('步骤三完成')

        // 4.发送
        xhr.send(null);   //如果是post请求，就放post参数，如果是get请求，发送null就行了 

        // •0: 请求未初始化
        // •1: 服务器连接已建立
        // •2: 请求已接收
        // •3: 请求处理中
        // •4: 请求已完成，且响应已就绪


        // 响应码：
        // 1xx   信息类
        // 2xx   成功     200
        // 3xx   重定向    304
        // 4xx   客户端错误   404
        // 5xx   服务端错误   

        // 参考
        // https://blog.csdn.net/ddhsea/article/details/79405996



    </script>
</body>
</html>

<?php
    for($i = 0;$i<5;$i++){
        // echo "hello world".$i;
        echo "hello world $i";    //双引号直接可以写变量，但是单引号不行，就表示一个串
        echo "<br>";

    }


?>

jquery版本的ajax

$("#btn").click(function(){
            $.ajax({
                type : "POST",
                url : "http://192.168.9.154:8888/0221ajax/01.php",
                data : {
                    uname : $("#username").val()
                },
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("该用户名可以使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("该用户名已被占用").css("color","red");
                    }
                },
                error : function(err){    //错误的
                    console.log(err)
                }
            })
        })

<?php
    header("ACCESS-CONTROL-ALLOW-ORIGIN:*");
    header("ACCESS-CONTROL-ALLOW-Methods:POST,GET");

    $db = ['jack','mack','mary'];   //模拟数据库
    $username = $_REQUEST['uname'];  //表示可以接收post参数或者get参数

    $flag = false;
    foreach($db as $n){
        if($n === $username){
            $flag = true;
            break;
        }
    }

    if($flag){
        echo "1";
    }else{
        echo "0";
    }

?>

转载于:https://www.cnblogs.com/tangdiying/p/10439404.html

weixin_30900589

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax的内容

ajax是什么？通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，可以局部刷新而不必整个页面整体刷新。url的简单认识：进入服务器的三种方式：1.localhost：端口号（进入本机创建的服务器）http://localhost:8888/2.127.0.0.1：端口号（进入本机创建的服务器）http://127.0.0.1:88...
复制链接

扫一扫