PHP-PHP与AJAX

最新推荐文章于 2024-08-14 09:01:55 发布
最新推荐文章于 2024-08-14 09:01:55 发布
阅读量563 收藏 3
点赞数 3
分类专栏： PHP基础 文章标签： PHP PHP与AJAX AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu_benjamin/article/details/100800745
版权

PHP与AJAX

一、传统Web应用–重新加载整个页面 - 不友好

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>AJAX Example</title>
</head>

<body>
  <form action="">
    学号：<input type="text" name="XH" size="12">
    课程名：<input type="text" name="KCM" size="12">
    <input type="submit" value="查询" name="bt1"><br>
    成绩：<input type="text" name="CJ" size="12" id="CJ">
  </form>
  <?php
      if(isset($_GET['bt1'])){
        $XH=$_GET['XH'];                //取得XH的值
        $KCM=$_GET['KCM'];        //取得KCM的值
        $conn=mysqli_connect("localhost","root","");  //连接MySQL服务器
        mysqli_select_db($conn, "PXSCJ");      //选择PXSCJ数据库
        mysqli_query($conn, "SET NAMES utf8mb4");    //将MySQL字符集设为gb2312

        $sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
        $result=mysqli_query($conn, $sql);                      //执行SQL语句$sql
        $row=mysqli_fetch_array($result);
        if($row)
          echo "<script> document.getElementById('CJ').value = $row[0]; </script>" ; //嵌入JS在'CJ'输出成绩
        else
          echo "<script> document.getElementById('CJ').value= '".'无此成绩'."' ;   </script>" ; 
      }
   ?>
</body>

</html>

在这里插入图片描述
点击查询按钮后页面会闪一下——不友好。

二、使用GET方式实现一个简单的服务器请求，通过输入学生学号和课程名，查看学生的成绩-- GET方式的PHP与AJAX交互

  • SY10_2_main.php:
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>AJAX Example</title>
  <script>
    function GetXmlHttpObject(){              //不同的浏览器使用不同的方法
      var XMLHttp=null;                       //来创建XMLHttpRequest对象
      try { 
        XMLHttp=new XMLHttpRequest(); 
        }                                //NetScape等浏览器
      catch(e){ 
        try { 
          XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
          }       //IE6以上版本浏览器
        catch(e){ 
          XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");}
        }
      return XMLHttp;
    }
    function cj_query(){
      XMLHttp=GetXmlHttpObject();                   
      //调用函数GetXmlHttpObject()初始化XMLHttpRequest
      var XH=document.getElementById("XH").value;         
      //getElementById()返回指定ID的第一个对象的引用
      var KCM=document.getElementById("KCM").value;
      var url="SY10_2_process.php";             //服务器端在SY10_2_process.php中处理
      url=url+"?XH="+XH+"&KCM="+KCM;              //url地址-以GET方式传递
      url=url+"&sid="+Math.random();                    
      //添加一个随机数，以防服务器使用缓存的文件
      XMLHttp.open("GET", url, true);              
      //以GET方式通过给定的url打开XMLHTTP对象
      XMLHttp.send(null);        //向服务器发送HTTP请求-请求内容为空(参数已在url中)
      XMLHttp.onreadystatechange = function(){                
      //定义响应处理函数--JS即时定义函数的方法
        if(XMLHttp.readyState==4&&XMLHttp.status==200){                
        //readyState为4--已经传回了所以
          document.getElementById("CJ").value=XMLHttp.responseText;   
          //信息-可以开始处理--更新页面了  
        }                                                             
         //innerHTML属性--获取对象的内容
      }                                                                
      //或向对象插入内容 
    }                                                                  
    //传回的信息--当字符串使用  
  </script>
</head>

<body>
  <form action="">
    学号：<input type="text" name="XH" size="12" id="XH">
    课程名：<input type="text" name="KCM" size="12" id="KCM">
    <input type="button" value="查询" onclick="cj_query()"><br> 
    <!-- //单击"查询"按钮 调用cj_query函数 -->
    成绩：<input type="text" name="CJ" size="12" id="CJ">
  </form>
</body>

</html>
  • SY10_2_process.php:
<?php
  $XH=$_GET['XH'];  			                //取得XH的值
  $KCM=$_GET['KCM'];					//取得KCM的值-不会出现编码(乱码)问题
  header('Content-Type:text/html;charset=utf-8');	//发送header-将编码设为gb2312
  $conn=mysqli_connect("localhost","root","");	//连接MySQL服务器
  mysqli_select_db($conn, "PXSCJ");			//选择PXSCJ数据库
  mysqli_query($conn, "set names utf8mb4");			//将mysql字符集设为gb2312

  $sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
  $result=mysqli_query($conn, $sql);
  $row=mysqli_fetch_array($result);                      //从结果集中逐行获取记录
  if($row)
    echo $row['成绩'];		                //输出课程成绩到请求端
  else
    echo "无此成绩";
?>

在这里插入图片描述
点击查询按钮，页面不会有刷新感——友好。

三、使用POST方式实现第二题-- POST方式的PHP与AJAX交互

  • SY10_3_main_post.php:
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>AJAX Example</title>
  <script>
    function GetXmlHttpObject(){              //不同的浏览器使用不同的方法
      var XMLHttp=null;                       //来创建XMLHttpRequest对象
      try { 
        XMLHttp=new XMLHttpRequest(); 
      }                                
      //NetScape等浏览器
      catch(e){ 
        try { 
          XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
        }       
        //IE6以上版本浏览器
        catch(e){ 
          XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      return XMLHttp;
    }
    function cj_query(){
      XMLHttp=GetXmlHttpObject();                   
      //调用函数GetXmlHttpObject()初始化XMLHttpRequest
      var XH=document.getElementById("XH").value;         
      //getElementById()返回指定ID的第一个对象的引用
      var KCM=document.getElementById("KCM").value;
      var url="SY10_3_process_post.php";          
      //服务器端在SY10_3_process_post.php中处理
      var poststr="XH="+XH+"&KCM="+KCM;            //要传的参数-以post方式传递
       
      XMLHttp.open("POST", url, true);              
      //以POST方式通过给定的url打开XMLHTTP对象
      XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //设置头信息
      XMLHttp.send(poststr);                    //向服务器发送HTTP请求(内容-参数)
      XMLHttp.onreadystatechange = function(){                
      //定义响应处理函数--JS即时定义函数的方法
        if(XMLHttp.readyState==4&&XMLHttp.status==200){                
        //readyState为4--已经传回了所以
          document.getElementById("CJ").value=XMLHttp.responseText;   
          //信息-可以开始处理--更新页面了  
        }                                                              
        //innerHTML属性--获取对象的内容
      }                                                                
      //或向对象插入内容 
    }                                                          
    //XMLHttp.responseText--传回的信息--当字符串使用  
  </script>
</head>

<body>
  <form action="">
    学号：<input type="text" name="XH" size="12" id="XH">
    课程名：<input type="text" name="KCM" size="12" id="KCM">
    <input type="button" value="查询" onclick="cj_query();"><br>
    成绩：<input type="text" name="CJ" size="12" id="CJ">
  </form>
</body>

</html>
  • SY10_3_process_post.php:
<?php
  $XH=$_POST['XH'];  			                //取得XH的值
  //$KCM=$_POST['KCM'];					//取得KCM的值-会出现编码(乱码)问题
  $KCM=$_POST['KCM'];           //将UTF-8转换成gb2312字符集
  header('Content-Type:text/html;charset=utf-8');	//发送header-将编码设为gb2312
  $conn=mysqli_connect("localhost","root","");	//连接MySQL服务器
  mysqli_select_db($conn, "PXSCJ");			//选择PXSCJ数据库
  mysqli_query($conn, "SET NAMES utf8mb4");			//将字符集设为gb2312

  $sql="select 成绩 from CJB where 学号='$XH' and 课程号=(select 课程号 from KCB where 课程名='$KCM')";
  $result=mysqli_query($conn, $sql);                             //执行SQL语句$sql
  $row=mysqli_fetch_array($result);
  if($row)
    echo $row['成绩'];			                //输出课程成绩到请求端
  else
    echo "无此成绩";
?>

在这里插入图片描述
点击查询按钮，页面不会有刷新感。

四、要添加一个学生的信息，用户输入学号，使用无刷新技术判断学号是否存在并输出提示

  • SY10_4_main.php:
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>AJAX Example2</title>
  <script>
    function GetXmlHttpObject() {
      var XMLHttp=null;
      try{ 
        XMLHttp=new XMLHttpRequest(); 
      }
      catch(e){ 
        try{ 
          XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
        }
        catch(e){ 
          XMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        }
      }
      return XMLHttp;
    }
    function run(){
      XMLHttp=GetXmlHttpObject();
      var XH=document.getElementById("XH").value;   //得到“学号”文本框中输入的值
      var XM=document.getElementById("XM").value;   //得到“姓名”文本框中输入的值
      var url="SY10_4_process.php";       //服务器端在SY10_4_process.php中处理
      var poststr="XH="+XH+"&XM="+XM;         //url地址，以POST方式传递
      XMLHttp.open("POST",url,true);             //以POST方式打开XMLHTTP对象 
      XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置头信息
      XMLHttp.send(poststr);                 //向服务器发送HTTP请求(内容-参数)
      XMLHttp.onreadystatechange = function(){     //定义响应处理函数
        if(XMLHttp.readyState==4&&XMLHttp.status==200){ 
          if(XH==""){ window.alert("学号未填"); }
          else{ 
            if(XMLHttp.responseText == "1"){ 
              document.getElementById("txthint").innerHTML="学号已存在"; 
            }
            else if(XMLHttp.responseText == "0"){ 
              document.getElementById("txthint").innerHTML="学号未被使用"; 
            }
          }
        }
      }
    }
  </script>
</head>

<body>
  <form>
    <table bgcolor="#CCCCCC" width="280" border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="90">学号:</td>
        <td><input type="text" name="XH" id="XH" size="15">
          <input type="button" name="select" value="检测" onclick="run();"></td>
      </tr>
      <tr>
        <td bgcolor="#CCCCCC" width="90">姓名:</td>
        <td><input name="XM" type="text" size="15" id="XM"></td>
      </tr>
      <tr>
        <td>性别:</td>
        <td><input type="radio" name="XB" value="1">男<input type="radio" name="XB" value="0">女</td>
      </tr>
      <tr>
        <td align="center" colspan="2"><input type="submit" name="cmdINSERT" value="添加"></td>
      </tr>
    </table>
  </form>
  <font color="red">
    <div id="txthint" align="center"></div>
  </font> <!-- 设置id为"txthint"的div标记，用于显示返回信息 -->
</body>

</html>
  • SY10_4_process.php:
<?php
   $XH=$_POST['XH'];
   $XM=$_POST['XM'];
   header('Content-Type:text/html;charset=utf-8');	
   //发送header-将浏览器编码设为gb2312
   $conn=mysqli_connect("localhost","root","");	//连接MySQL服务器
   mysqli_select_db($conn, "PXSCJ");			//选择PXSCJ数据库
   mysqli_query($conn, "set names utf8mb4");			//将mysql字符集设为gb2312
   $sql="select * from XSB where 学号='$XH'";		//查询语句
   $result=mysqli_query($conn, $sql);
   $row=mysqli_fetch_array($result);                     //从结果集中逐行获取记录
   if($row)
     echo "1";
   else
     echo "0";
?>

在这里插入图片描述
在这里插入图片描述
点击检测，不会有页面的属性感，会直接提示相应的结果。

创作不易，喜欢的话加个关注点个赞，蟹蟹蟹蟹! 顺祝大家中秋节快乐，阖家幸福，万事如意！

快乐的小小程序猿
关注
专栏目录
PHP+AJAX教程（详细）
Coisini的博客
05-29 1万+
AJAX： WebjxCom提示：AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。 AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML...
php-ajax-dischi
02-09
标题“php-ajax-dischi”可能指的是一个使用PHP和AJAX技术来管理或操作磁盘（dischi，在意大利语中意为“磁盘”）的项目。在这个项目中，PHP可能是后端服务器语言，用于处理数据和逻辑，而AJAX则在前端发挥作用，...
PHP开源AJAX框架
mrzhangshunli的专栏
03-28 189
jQPie 这是一个扩展自jQuery，结合PHP的一个Ajax框架。支持XML，HTML和JSON handler。jQPie提供的功能包括： 利用$.getJSON方法简化来自PHP的请求和处理数据。 利用$.(element).load方法注入PHP生成的html到某一页面元素中。 利用$.jqpie方法直接从web页面调用PHP函数。在响应$.jqpie调用时从PHP函数反过来调用jQue...
PHP中的AJAX技术是如何与PHP交互的？
最新发布
破损的天堂鸟博客
08-14 877
在PHP中，可以使用。
PHP与AJAX
hds_fighting的博客
08-10 285
一.基础 1.ajax是什么？ ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML) ajax不是编程语言，ajax是一种用于创建快速动态网页的技术。 2.ajax有什么特点？ 传统的网页如果需要更新，必须重载整个页面，ajax可以实现局部刷新的效果，即向服务器 请求部分页面所需数据更...
PHP + AJAX
Haohappy的专栏
09-20 2792
AJAX最近实在很火，不过我对之了解不多。本来根据内部消息，在《PHP&More》第六期上Knight会有篇文章介绍一下PHP和AJAX的结合应用,所以我就一直偷懒没去研究,想等那篇文章再学:D 不过今天恰好有空,查了不少资料,小结一下:1.AJAX确实是一个很酷的技术,除了大家所熟知的Google Map等,还有不少很有意思的应用,例如这个:http://www.unwieldy.net/aja
PHP和ajax（一）
hefrankeleyn的博客
12-23 1640
    本篇文章是php中使用ajax的案例，该案例有三个文件组成：html文件，js文件，php文件。这个案例实现了一个简单的功能：有一个文本框，当在文本框中输入内容的时候，在页面上会有提示信息展示出来，如下图所示： 一、html页面：input.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta char...
crud-php-ajax.zip_ajax php_crud php ajax_php ajax
09-24
这个项目展示了如何在不刷新整个页面的情况下，通过AJAX与服务器进行异步通信，从而提高用户体验。 首先，让我们详细了解一下PHP。PHP（Hypertext Preprocessor）是一种广泛使用的开源服务器端脚本语言，特别适用于...
PHP-JQuery-Ajax-json
03-18
标题“PHP-JQuery-Ajax-json”揭示了这个压缩包文件主要涉及的是Web开发中的核心技术，具体包括PHP、jQuery、Ajax以及JSON。这四个元素在构建动态、交互式的Web应用程序时起着至关重要的作用。 1. **PHP（Hypertext...
Ajax-datatable-using-ajax-php.zip
09-17
Ajax-datatable-using-ajax-php.zip,使用ajax php的数据表,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的...
php和ajax关系,PHP和ajax详解
weixin_34434736的博客
04-12 218
Examples名称类型服装视频汽车单价：库存：图片：描述：function ajax(){var f=document.aax;var name=f.name.value;var typeid=f.s.value;var pic=f.pic.value;var price=f.price.value;var note=f.note.value;var xmlhttp=null;if(window...
PHP 和 AJAX
03-20
NULL 博文链接：https://fly-sky.iteye.com/blog/864798
php和ajax哪个好,PHP和AJAX
weixin_39634876的博客
03-28 134
什么是AJAX？AJAX代表A同步JavaScript和XML。AJAX是一种新技术，通过XML，HTML，CSS和Java Script的帮助，创建更好，更快速，更具交互性的Web应用程序。传统的Web应用程序使用同步请求向服务器发送信息。这意味着您填写一个表单，点击提交，并从服务器获取新的信息。在按下AJAX时，JavaScript会向服务器发出请求，解释结果并更新当前屏幕。在最纯粹的意义上，...
AJAX与PHP
茂木残花任风萧
08-07 445
AJAX与PHP 一、post-file 提交文件，$_FILES来收取文件，要指定编码文件 默认存在一个temp文件夹中，要指定文件夹来存储文件 PHP路径拼接使用. 号 二、AJAX 技术 AJAX是服务器交换数据并更新部分网页的技术，不需要重新加载整个页面 AJAX 五个步骤： 1.创建一个异步对象 : XMLHttpReques()...
php与Ajax（一）———Ajax简介
yanqianglifei的专栏
05-12 705
AJAX 简介 AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML） AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。 AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。 AJAX 使用 JavaS
PHP 和 ajax（二），操作xml
hefrankeleyn的博客
12-23 178
    php使用ajax来读取xml文件。该功能设计到四个文件：html页面，js页面，php页面、xml文件。 一、现实的功能     在html中，通过选择改变select元素，来读取xml文件中相应的内容，如下图： 二、html页面，cdxml.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta ...
初识php与ajax
weixin_59151150的博客
12-28 1111
PHP 服务器（phpstudy）：apache，mysql apache服务器：接收请求，做出响应，运行php代码。 默认端口号：80 http://127.0.0.1:80--->http://127.0.0.1 http://localhost:80--->http://localhost mysql数据: 数据库，存储数据的 ph...
PHP AJAX
冲冲冲
05-10 336
1. AJAX实现实时搜索 2. AJAX连接数据库 3. AJAX实现前端（HTML）与后端（PHP）的数据交互
php和ajax关系,php和ajax的简单实现
weixin_39721009的博客
04-12 92
步骤一、新建文件夹:js,把最新的jquery.js放里边。步骤二、新建文件mygetjson.php，其内容为class custom_json {/*** Convert array to javascript object/array* @param array $array the array* @return string*/public static function encode($...
Php-Ajax应用程序架构详解
- **PHP框架**：对于PHP，有AjaxAC和XAJAX这样的框架，它们提供了方便的方法来处理AJAX请求，简化了PHP与前端交互的过程。 - **其他语言框架**：除了PHP，还有支持Ruby等其他语言的服务器端框架，这些框架同样可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值