• javascript/ajax和php 进阶 之 项目实战


    1,使用异步思想做一个下拉列表,能够选择和展示数据库中对应的信息。

      1,事件知识:所有的事件可参照:https://www.jb51.net/html5/459444.html

      2,js中this补充:

    在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

     this 出现的场景分为四类,简单的说就是:

    有对象就指向调用对象:

    var myObject = {value: 100};
    myObject.getValue = function () {
     console.log(this.value); // 意思是输出这个object的某个属性。
    
     console.log(this);//我们可以查看this,事实证明this指的就是myObject 对象本身
     
      return this.value;
    };
    //这个和python一样,在没有实例化的时候,用“self/this.属性"代替”对象.属性“

    没调用对象就指向全局对象

    var myObject = {value: 100};
    myObject.getValue = function () {    //为对象定义一个方法
     var foo = function () {    //这个方法包含一个函数,但是函数本身和对象没有任何关系,所以this无处可指,只能指向global
      console.log(this.value) // => undefined
      console.log(this);// 输出全局对象 global
     }; 
     foo(); 
     return this.value;
    };
     //在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global。

    用new构造就指向新对象:

    js中的构造函数在我看来就是构造对象的函数,纯粹为了产生对象而产生对象,new实例化以后,实例中就指向了实例本身,但是实际上,构造函数中的this指的也是本身。

    var SomeClass = function(){
     this.value = 100;    //这等于是说:我要构造一个函数了,大家都闪开,新函数如果使用:”实例.属性“这样的方法,this就让它指向他们本身吧,反正他们都已经继承过去了,而且我的某属性有时候只是形参,不是很方便
    }
     var myCreate = new SomeClass();
     
    console.log(myCreate.value);     

    通过 apply 或 call 或 bind 来改变 this 的所指。(这个我不能理解,留后:https://www.jb51.net/article/65850.htm)

     3,php中的$_GET变量:

    预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。从带有”get“方法的表单发送到信息,对任何人都是可见的。客户的html和php要能够对起来,比如:

    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    <form action="welcome.php" method="get">
    名字: <input type="text" name="fname">    //在html里设置了一个表单,格式是text,传递用户信息的时候,将会用到name属性,”fname"会成为php中$_GET变量的键。
    <input type="submit" value="提交">
    </form>
    </body>
    </html>

    而php这端,直接开着$_GET接文本就行了,

    你好<?php echo $_GET["fname"];?>

       4,get方法中url的特殊传值问题(纠结了好几天,总算捯饬明白了)

    我有前端有一个下拉列表,表里有5个单选项:012345,当我需要查询某一个但选项的详情,我需要把我选的(假设是2)传到js中,然后由js传到服务端,如何传到服务端?答案是:包在url请求中上传到服务端,怎么包?一般的约定是url后边加问号加键值对。问号在url中主要起连接作用,如果传递好几个值,那就用&符号分隔开来。

     接下来到了激动人心的贴代码时刻:

    首先是前端的代码:

    ajax_sql.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>daqing's ajax-mysql test</title>
    <script>
    function showSite(str)
    {   
        //showSite的作用在于:检查下拉列表是否有内容被选择
        if (str=="")
        {
            document.getElementById("txtHint").innerHTML="";
            return;    //return语句用于中止函数的执行
        }    //如果在下拉列表中什么也没有得到,那就直接中止这个函数的执行,省得浪费资源,这大约是为了让代码更加健壮。
            
        //创建xmlhttp(是XMLHttpResquest的实例)
        if (window.XMLHttpRequest)
        {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    
            //创建在服务器响应时候执行的函数
        xmlhttp.onreadystatechange=function()
        {
            if(xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;//服务端的echo内容,也就是传说中的responseText
            }
        }
            //向服务器上的文件发送请求,请注意,这个请求的参数,参数是一个键值对,q=str,这也服务端解析请求的依据;后边包含了str,也就是下拉列表中的内容
        xmlhttp.open("GET","ajax_sql.php?q="+str,true);//js会请求服务器调用getsite_mysql.php,php会自己用$_GET()解析url里附带的信息:q=str
        xmlhttp.send();
    }     
    </script>
    </head>
    <body>
        <form>
            <select name="users" onchange="showSite(this.value)"> <!--下拉列表,onchange的意思是当元素改变时候运行脚本shhowSite()-->
                <option value="">请选择一个名字</option><!--首选项-->
                <option value="1">daqing</option>
                <option value="2">dahu</option>
                <option value="3">lily</option>
                <option value="4">jack</option>
                <option value="5">lihua</option>
            </select>
        </form>
    <br>
    <div id="txtHint"><b>网站信息将会显示在这里</b></div>
    </body>
    </html>

    与之配合的服务端代码:

    ajax_sql.php

    <?php
    
    $q=isset($_GET["q"]) ? intval($_GET["q"]) : "";    //这个q是用来存值的键,那值呢?是下拉列表中的选项代码,比如,1号表示google,那它请求访问的是google存在数据库里的详细信息。intval()函数是把给定格式转换成整数;这个格式是个三元判断的格式
    if (empty($q)){
        echo "请选择一个网站";
        exit;
    }
    $con=mysqli_connect("localhost","xxx","xxx","xxx");
    if (!$con)
    {
        die("connect problem:".mysqli_error($con));
    }
    //mysqli_select_db($con,"ajax_sql");选择使用哪个数据库,但是在$con中已经定义也是可以的,如果纯粹是为了防止编码问题引起的错误,建议增加选择数据库的语句,然后后面加上设定编码方式
    //mysqli_set_charset($con,"utf-8");//选择使用数据表的编码方式,省得乱码
    $sql="select * from ajax_sql where id ='$q' ";
    $result=mysqli_query($con,$sql);
    //以下的内容是一整个的table
    echo "<table border='1'>
    <br>
    <br>
    <tr>
    <th>ID</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    </tr>";
    //以上是先输出表头,tr表示竖着排列,th表示表头:table head,tr表示表的行(table row),td表示表格单元
    while ($row=mysqli_fetch_array($result))
    {
        echo "<tr>";    //一行开始
        echo "<td>".$row['id']."</td>";    //行里有各种单元
        echo "<td>".$row['name']."</td>";
        echo "<td>".$row['age'] ."</td>";
        echo "<td>".$row['sex']."</td>";
        echo "</tr>";    //一行结束,由此可见,我们的php输出的引号里的内容也是遵循html的标记符的
    }
    echo "</table>";
    mysqli_close($con);
    
    ?>

     5,网页请求和request请求问题

    我们知道,用户使用浏览器发送访问请求,然后服务端的php(仅说php哈)返回请求的的数据,可是你有没有想过,php是如何知道返回什么东西给用户的?我做了个实验,是这样的,服务端放了php文件:<?php echo "<p>hello php</p>"; ?>,接下来我不通过浏览器访问,我用pythonrequests包,发送访问请求requests.get(url),然后用.text解析返回的内容,我收到了这样的消息:<p>hello php</p>,原来我们收到的是php中echo的东西!那么我们是否可以收到其他html表单元素呢?自己做试验吧。

  • 相关阅读:
    shell-变量的数值运算let内置命令
    shell-变量的数值运算符-计算双括号(())的使用
    shell-批量修改文件名及扩展名多案例
    shell-变量的字串应用技术
    一个MVVM前端扩展器
    测试一个mysql 悲观锁
    spring rest项目提示Request method 'PUT' not supported Method Not Allowed 405 错误
    Mysql 使用sql语句添加列,修改列默认值,添加类注释
    理解java泛型中的 上界extend 下界super
    mysql存储过程游标循环装载字符串SQL语句示例
  • 原文地址:https://www.cnblogs.com/0-lingdu/p/9646812.html
Copyright © 2020-2023  润新知