ajax php

写过一篇  论坛元老 | 2024-10-8 04:30:51 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1668|帖子 1668|积分 5004

php安装，背景处置惩罚脚本语言。
后端开发语言不能直接允许，必须放在服务器对对应的文件夹下运行。
如：wamp的对应服务器的文件夹是www



get请求

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02-get</title>
  6. </head>
  7. <body>
  9. <form action="02-get.php" method="get">
  10.     <input type="text" name="userName"><br>
  11.     <input type="password" name="userPwd"><br>
  12.     <input type="submit" value="提交"><br>
  14. </form>
  17. </body>
  18. </html>
复制代码
  1. <?php
  2. //print_r($_GET);//查看可以知道这回得到一个Array的数据
  3. echo $_GET["userName"];
  4. echo $_GET["userPwd"];
  6. ?>
复制代码



post

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>02-post</title>
  6. </head>
  7. <body>
  9. <form action="02-post.php" method="post">
  10.     <input type="text" name="userName"><br>
  11.     <input type="password" name="userPwd"><br>
  12.     <input type="submit" value="提交"><br>
  14. </form>
  16. </body>
  17. </html>
复制代码
  1. <?php
  3. //print_r($_GET);//查看可以知道这回得到一个Array的数据
  4. echo $_POST["userName"];
  5. echo $_POST["userPwd"];
  7. ?>
复制代码

get和post的异同点




ajax


原生步调



  • 创建异步对象

  • 设置请求方式和请求地址

  • 发送请求

  • 监听状态变革


  • 处置惩罚返回的效果
代码及征象：
  1. //4.监听状态的变化,状态变化都会执行
  2.                 xmlhttp.onreadystatechange = function () {
  6.                         }
复制代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>04-ajax-get</title>
  6.     <!--
  7.     1.什么是Ajax
  10.     -->
  11.     <script >
  12.         window.onload = function () {
  13.             var oBtn= document.querySelector("button");
  14.             oBtn.onclick = function (evl) {
  15.                 //1.需要创建异步对象
  16.                 var xmlhttp = new XMLHttpRequest();
  17.                 //2.设置请求方式和请求地址
  18.                 xmlhttp.open("GET","04-ajax-get.php",true);
  19.                 //3.发生请求
  20.                 xmlhttp.send();
  21.                 //4.监听状态的变化,状态变化都会执行
  22.                 xmlhttp.onreadystatechange = function () {
  23.                     if(xmlhttp.readyState === 4){
  24.                         //判断是否请求成功
  25.                         if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
  26.                             xmlhttp.status === 304){
  27.                             //5.处理返回的结果
  28.                             console.log("接收到服务器返回的数据");
  29.                         }
  30.                         else {
  31.                             //5.处理返回的结果
  32.                             console.log("没有接收到服务器返回的数据");
  33.                         }
  34.                     }
  36.                 }
  39.             }
  40.         }
  41.     </script>
  42. </head>
  43. <body>
  45. <button>发生请求</button>
  46. </body>
  47. </html>
复制代码
  1. <?php
  2. echo "ajax get test"
  3. ?>
复制代码

完整步调代码及效果：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>04-ajax-get</title>
  6.     <!--
  7.     1.什么是Ajax
  10.     -->
  11.     <script >
  12.         window.onload = function () {
  13.             var oBtn= document.querySelector("button");
  14.             oBtn.onclick = function (evl) {
  15.                 //1.需要创建异步对象
  16.                 var xmlhttp = new XMLHttpRequest();
  17.                 //2.设置请求方式和请求地址
  18.                 xmlhttp.open("GET","04-ajax-get.php",true);
  19.                 //3.发生请求
  20.                 xmlhttp.send();
  21.                 //4.监听状态的变化,状态变化都会执行
  22.                 xmlhttp.onreadystatechange = function () {
  23.                     if(xmlhttp.readyState === 4){
  24.                         //判断是否请求成功
  25.                         if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
  26.                             xmlhttp.status === 304){
  27.                             //5.处理返回的结果
  28.                             //console.log("接收到服务器返回的数据");
  29.                             alert(xmlhttp.responseText);
  30.                         }
  31.                         else {
  32.                             //5.处理返回的结果
  33.                             //console.log("没有接收到服务器返回的数据");
  34.                         }
  35.                     }
  36.                 }
  37.             }
  38.         }
  39.     </script>
  40. </head>
  41. <body>
  43. <button>发生请求</button>
  44. </body>
  45. </html>
复制代码
  1. <?php
  2. echo "ajax get test"
  3. ?>
复制代码

jquery步调



优点

小写也可正常发送


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

写过一篇

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表