Ajax学习笔记01--php基础语法

最新推荐文章于 2021-08-05 12:39:25 发布
最新推荐文章于 2021-08-05 12:39:25 发布
阅读量72 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/109289606
版权
1、php上传文件

html文件

<html>
    <style type="text/css">
    </style>
    <script type="text/javascript"> 
     
    

    </script> 
<head></head>
<body>    
    <form action="http://127.0.0.1/ex01/mytest.php" method="post" enctype="multipart/form-data">
      <input type="file" name="upfile"><br/>
      <input type="submit" value="上传"><br/>
    </form>
</body>
</html>

php文件

<?php
$fileInfo=$_FILES["upfile"];
print_r($fileInfo);
$fileName=$fileInfo["name"];
$filePath= $fileInfo["tmp_name"];
move_uploaded_file($filePath,"./sources/".$fileName);
?>

在这里插入图片描述

2、完整的ajax发送异步请求的过程
<html>
    <style type="text/css">
    </style>
    <script type="text/javascript"> 
    window.onload=function(event){
      var obtn=document.querySelector("button");
      obtn.onclick=function(event1){
        //1、创建一个异步对象
          var xmlhttp=new XMLHttpRequest();
        //2、设置一个请求方式和请求地址
          xmlhttp.open("get","http://127.0.0.1/ex01/mytest.php",true);
        //3、发送请求
         xmlhttp.send();
        //4、监听状态的变化
        xmlhttp.onreadystatechange=function(event2){//监听到变化后调用此函数
          //判断请求是否成功
          if(xmlhttp.status>=200 && xmlhttp.status<300 || xmlhttp.status==304){
            //5、返回处理的结果
            if(xmlhttp.readyState==4){
              console.log("接收到服务器返回的数据");
            }
          }
          
        }
        
      }
    } 
    

    </script> 
<head></head>
<body>    
    <button>发送请求</button>
</body>
</html>
3、ajax发送异步请求的过程2

html文件

<html>
    <style type="text/css">
    </style>
    <script type="text/javascript"> 
    window.onload=function(event){
      var obtn=document.querySelector("button");
      obtn.onclick=function(event1){
        //1、创建一个异步对象
          var xhr=new XMLHttpRequest();
        //2、设置一个请求方式和请求地址
        xhr.open("GET","http://127.0.0.1/ex01/mytest.php",true);
        //3、发送请求
        xhr.send();
        //4、监听状态的变化
        xhr.onreadystatechange=function(event2){//监听到变化后调用此函数
          //判断请求是否成功
          if(xhr.readyState==4){
            //5、返回处理的结果
            if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
              console.log("请求成功");
              console.log(xhr.responseText);
            }
            else{
              console.log("请求失败");
            }
          }
          
        }
        
      }
    } 
    

    </script> 
<head></head>
<body>    
    <button>发送请求</button>
</body>
</html>

php文件

<?php

echo "ajax get page";

?>

打印
请求成功
ajax get page

4、ajax使用POST方式发送异步请求

html文件

<html>
    <style type="text/css">
    </style>
    <script type="text/javascript"> 
    window.onload=function(event){
      var obtn=document.querySelector("button");
      obtn.onclick=function(event1){
        //1、创建一个异步对象
          var xhr=new XMLHttpRequest();
        //2、设置一个请求方式和请求地址
        xhr.open("POST","http://127.0.0.1/ex01/mytest.php",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3、发送请求
        xhr.send("username=zhangsan&password=123456");//字符串是传入的数据
        //4、监听状态的变化
        xhr.onreadystatechange=function(event2){//监听到变化后调用此函数
          //判断请求是否成功
          if(xhr.readyState==4){
            //5、返回处理的结果
            if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
              console.log("请求成功");
              console.log(xhr.responseText);
            }
            else{
              console.log("请求失败");
            }
          }
          
        }
        
      }
    } 
    

    </script> 
<head></head>
<body>    
    <button>发送请求</button>
</body>
</html>

php文件

<?php

echo $_POST["username"];
echo "<br/>";
echo $_POST["password"];

?>

打印
请求成功
zhangsan
123456

5、jQuery方式ajax使用POST方式发送异步请求

html文件

<html>
    <style type="text/css">
    </style>
    <script language="javascript"  src="jquery-3.5.1.js"></script><!-- 引入jquery库-->
    <script type="text/javascript"> 
    window.onload=function(event){
      var obtn=document.querySelector("button");
      obtn.onclick=function(event1){
        $.ajax({
          type:"GET",
          url:"http://127.0.0.1/ex01/mytest.php",
          data:"username=lisi&location=Boston",
          success:function(msg){
            console.log("Data sage"+msg);
          },
          error:function(xhr){
            console.log(xhr.status);
          }
        });
        
      }
    } 
    

    </script> 
<head></head>
<body>    
    <button>发送请求</button>
</body>
</html>

php文件

<?php

echo $_GET["username"];
echo "<br/>";
echo $_GET["location"];

?>

打印：
Data sagelisi
Boston

心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
封装ajax请求
Sycc的博客
02-12 617
封装ajax请求： 定义函数ajax，封装ajax4步： function ajax(){ //创建xhr对象 //绑定onreadystatechange事件处理函数 //如果有参数,将参数拼接url末尾 //打开连接(url,type) //如果是post,修改请求头 //如果是get, send() //否则 send(参数) } //url:服务端地址 //type:请求的类型get/post //data:参数可有可无 datatype:返回数据的类型,如果
Ajax的get请求的简易封装和使用
SDAW_1的博客
02-03 471
封装的简易Ajax-get,js文件 function ajax(url,success,error) { //1、创建一个异步对象 var xmlhttp = new XMLHttpRequest(); //2、设置请求方式和请求地址 xmlhttp.open("GET", url, true); //3、发送请求...
Ajax请求GET/POST方法的封装
liang526011569的博客
11-29 3989
html lang="en"> head>     meta charset="UTF-8">     title>GET请求封装title> head> body> script type="text/javascript"> // 方法 // get(url, options, callback)    get是Ajax请求GET方法的封装 // 参数 // url
Ajax——get封装
jwz934738949的博客
09-07 185
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时，有可能会出现中文，但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.
自己动手简单封装ajax的get和post请求
weixin_34186128的博客
06-15 245
2019独角兽企业重金招聘Python工程师标准>>> ...
达内学习笔记----PHP基础+MYSQLS基础+JS笔记整理.docx
06-25
总结，这份学习笔记涵盖了PHP的基础语法、数学和日期处理、字符串操作，以及MySQL和JavaScript/jQuery的基本知识，是一份全面的Web开发学习资料。通过深入理解和实践这些内容，开发者可以提升自己的Web开发技能。
php-paper-开发笔记
最新发布
06-02
【标题】"php-paper-开发笔记" 涵盖了PHP编程语言的深入学习和实践经验，...通过深入研究这份"php-paper-开发笔记"，开发者不仅能巩固PHP基础知识，还能了解到最新的开发趋势和最佳实践，提升自身在PHP领域的专业能力。
自己学习的php学习笔记
04-25
在自学习PHP的过程中，理解其基本语法是非常重要的第一步。PHP的输出主要通过`echo`命令，可以用来显示字符串。字符串的拼接可以使用双引号或单引号，双引号允许直接解析变量，而单引号则不会。 变量是PHP中存储...
传智播客-PHP基础视频_html+css+js笔记
07-24
学习笔记是对课堂内容的记录和整理，有助于记忆和理解。对于编程学习来说，笔记不仅可以帮助回顾和复习，还可以作为解决问题的参考资料。整理笔记的过程也是对知识的再次消化和提炼，有助于深化理解和应用。 在...
php笔记-欢迎增加
07-26
### PHP笔记知识点详解 #### 一、概述 本篇PHP笔记涵盖了从基础到进阶的知识点，适合初学者和...综上所述，这份PHP笔记不仅涵盖了基础语法和常用技术，还深入介绍了高级主题和技术细节，是一份非常有价值的参考资料。
html页面模式get/post请求
09-14
用HTML页面模式get/post请求，psot请求参数的格式为json串
ajaxRequest.js(ajax get post方法封装，方便前端调用)
02-13
封装jquery ajax方法，方便调用，避免在代码中频繁使用 $.ajax({ type: 'GET', url: url, ...... )}; 统一调用公共方法即可，区分同步异步，get post！希望对大家有帮助
Ajax的简单封装
string_user_get_set的博客
03-06 211
Ajax的简单封装： 说明：简单封装，总结下ajax的请求方式，异步，RequestText/RequestXml,XMLHttpRequest,XMLHttpRequest,onreadystatechange,readyState,setRequestHeader,status,open,send的使用。案例实在Asp.NET MVC 下写的。 代码： cshtml: @{
ajax请求的GET与POST方法封装
wwming的日记本
10-23 585
ajax请求封装 ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 什么是ajax AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，...
原生js封装Ajax的GET请求
eyes++的博客
05-23 233
Ajax封装代码部分： function obj2str(obj){ // 防止URL不变导致IE调用缓存 obj.t = new Date().getTime(); let res = []; for (let key in obj){ // URL中不能有中文，需要转码，即调用encodeURLComponent() res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[ke
ajax封装get的基本方法（附流程）
qq_45155741的博客
07-04 611
Ajax
ajax请求get方法的封装,使用jQuery中Ajax的封装函数——$.get()
weixin_35572715的博客
08-05 181
MATLAB中图片格式与视频格式的转换参考：https://blog.csdn.net/iracer/article/details/48876473Matlab—将绘图保存为视频VideoWrite()函数用法与自定义视频尺寸可参考：https://blog.csdn.net/wenyusuran/article/details/28392061?locationNum=...SparkJava...
ajax——get函数的封装。
pengzihui的博客
03-11 252
<script> // 相对路径 var url = "data/hello.txt"; // 服务器绝对路径 // var url = "http://localhost/ajax/data/hello.txt"; document.onclick = function(){ var xhr = new XMLHttpReque...
Ajax请求GET方法的封装
weixin_30535043的博客
05-23 96
Ajax请求GET方法的封装 function get(url, options, callback){ //定义get函数 　　if(XMLHttpRequest){ 　　　　var xhr=new XMLHttpRequest(); 　　}else{ 　　...
JavaScript学习笔记：DOM、BOM与AJAX详解
此外，文档还可能包含了JavaScript的基础语法介绍，如变量声明、数据类型（字符串、数值、布尔值等）、控制流语句（条件语句、循环语句）以及函数定义等内容。对于初学者来说，这部分内容可能是学习JavaScript的第一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值