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表单元素呢？自己做试验吧。