利用ajax 在当前页面和php mysql 传递数据 wamp 环境

最新推荐文章于 2021-06-10 03:27:48 发布

sweet-sheep

最新推荐文章于 2021-06-10 03:27:48 发布

阅读量706

点赞数

分类专栏： jquery ajax 文章标签： ajax php wamp mysql

本文链接：https://blog.csdn.net/qq_38264344/article/details/73521689

版权

jquery ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用ajax 在当前页面和php mysql 传递数据 wamp 环境

1. Ajax

Asynchronous JavaScript+XML

向服务器请求额外数据而无需卸载页面

XMLHttpRequest对象(XHR)

XHR对象取得新的数据，DOM将新的数据插入到页面中

xhr.open(“get”,”example.php”,false)-同步请求

xhr.send(null)

相应自动填充XHR对象的属性

responseText:作为响应主体被返回的文本

responseXML:如果相应的内容类型是”text/XML”或”application/xml“，这个属性中将保相应数据的XML DOM 文档

status：响应的HTTP状态

statusText：HTTP状态的说明

1. Jquery中的Ajax

$.ajax()

jquery中的ajax方法参数总是记不住，这里记录一下。

1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

例子

text.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
  
        //按钮单击时执行

function show(){
    str=$("#name").val();

     var html = $.ajax({
               type: "POST",
               url: "index.php",
               data: "name="+str,//在php中data: "name=$tt&id=$id&content="+text,
               async: false

            }).responseText;
     var html2="<tr><td>序号</td><td>姓名</td><td>课程</td><td>成绩</td><td style='width: 180px;'>时间</td></tr>";
            $("#myDiv").html(html2);
            $("#myDiv").append(html);
            if (html==null) {alert(html);}
}
</script>   
 
</head>
    <body>
    <div class="div">
     <img src="1.png">
     <br>
     <br>
     <span>请输入学生姓名</span>
        <input type="text" name="name"  id="name" >
        <button  type="button" οnclick="show()" >查询</button>
    <br>
    <br>
    <table id="myDiv">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>课程</td>
            <td>成绩</td>
            <td style="width: 180px;">时间</td>
        </tr>
    </table>
        
    </div>

    </body>

</html>

index.php

<?php
 session_start();
  require_once('connect.php');
 /*  id查询
    
*/ 
 $name="某某某";
 $name=$_POST['name'];


$sql_user="select id from  student where name='$name'";
  $query_user= mysqli_query($con,$sql_user);
  $user_data = $query_user->fetch_assoc();

  $id=$user_data['id'];
  
  $sql = "select * from class where id='$id'";
  $query = mysqli_query($con,$sql);
  
  if ($id==null) {
    echo "<spam>";
    echo "没有该学生";
    echo "</span>";
  }
  else if($query&&$query->num_rows)
  {
     while ($row  =$query->fetch_assoc()) {
         # code...
        $data[] = $row;
         echo "<tr>";
         echo "<td>" . $row['c_id'] ."  ". "</td>";
         echo "<td>" . $name . "</td>";
         echo "<td>" . $row['c_name'] . "</td>";
         echo "<td>" . $row['grade'] . "</td>";
         echo "<td>" . $row['date'] . "</td>";
         echo "<br>";
         echo "</tr>";  
   }

  }
  else
  {
    echo "<span>该同学没有数据</span>";
  }
?>