关于FormData和ajax（）的使用

最新推荐文章于 2024-06-16 11:02:37 发布
最新推荐文章于 2024-06-16 11:02:37 发布
阅读量829 收藏
点赞数
分类专栏： 常见的数组操作问题 文章标签： ajax formdata

jQuery简单的Ajax调用示例

jQuery确实方便，下面做个简单的Ajax调用：

建立一个简单的html文件：

复制代码 
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){
              //取Ajax返回结果
              //为了简单，这里简单地从文件中读取内容作为返回数据
              htmlobj=$.ajax({url:"/Readme.txt",async:false});
               //显示Ajax返回结果
               $("#myDiv").html(htmlobj.responseText);
         });
    });
</script>    
</head>
    <body>
        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>
复制代码

好了，点击按钮就可以看到效果了。

当然，jQuery的Ajax调用可以控制项很多，这里演示了简单的调用。

注意你自己的jquery引用路径。

 

好吧，做一个调用后台的例子：

复制代码 
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){
              
              //Ajax调用处理
            var html = $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               async: false

            }).responseText;
            $("#myDiv").html('<h2>'+html+'</h2>');
         });
    });
</script>    
</head>
    <body>
        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>
复制代码

后台代码：

<?php
    $msg='Hello,'.$_POST['name'].',your age is '.$_POST['age'].'!';
    echo $msg;

现在已经可以从后台来获取数据了!

 

当然，我们还可以这样来调用Ajax:

复制代码 
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //按钮单击时执行
        $("#testAjax").click(function(){
              
              //Ajax调用处理
            $.ajax({
               type: "POST",
               url: "test.php",
               data: "name=garfield&age=18",
               success: function(data){
                        $("#myDiv").html('<h2>'+data+'</h2>');
                  }
            });
            
         });
    });
</script>    
</head>
    <body>
        <div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
        <button id="testAjax" type="button">Ajax改变内容</button>
    </body>
</html>
复制代码

 

注意，

success: function(data)

中的data参数可以改为别的名称，比如success: function(msg)，msg（data）为返回的数据。 此处为回调函数的参数，而非

data: "name=garfield&age=18"

中的Ajax调用中的data参数。

老毕姥爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax的使用实例
g15896871079的博客
11-19 443
ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , async:true, dataType: dataType, function(data){ } }); $.ajax的参数描述： 参数 描述 参数 描述 type 必需,请求类型post或get请求 url 必需,规定把请求发送到哪个 URL。 data 可选,映射或字符串值。规定连同请求发送到服
通过Ajax方式上传文件使用FormData进行Ajax请求
10-21
主要介绍了通过Ajax方式上传文件使用FormData进行Ajax请求的相关资料,需要的朋友可以参考下
jQuery简单的Ajax调用示例
weixin_34375233的博客
02-06 142
jQuery确实方便，下面做个简单的Ajax调用： 建立一个简单的html文件： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"&gt;&lt;/script
Ajax基础到实战（四）——formData对象_ajax formdata
最新发布
2301_82243710的博客
06-16 614
在ajax对象 xhr 中有upload属性，upload属性中有关于文件上传的一些事件，在文件上传的过程中可以持续触发onprogress事件，在这个事件的事件对象中我们可以看到 ev.loaded 以及 ev.total 这两个事件对象的属性，分别代表当前文件上传的大小以及上传文件的总大小，我们可以据此计算出文件上传的进度并以百分比的形式显示在页面中。password 这个参数在传递给服务器端之前就已经删除了，因此可以看到在最终的输出结果中是没有看到 pasword 这个属性的。
ajax调用实例
weixin_30710457的博客
09-30 69
海尔订阅按钮的例子： $(".dingyue").click(function () { if (istrsidssdssotoken()) {//cookie 中的是否登录 if (null == proid || "undefined" == proid) { return; ...
Node.js —— 入门
zxw的博客
12-01 232
Node.js 入门学习Nodejs 简介什么是Nodejs？浏览器与Node.js 中的JavaScript区别Nodejs的特性Node的核心模块Node的模块系统（模块化开发）Nodejs的常用API一、文件读写 fs模块1、读文件 fs.readFile2、写文件 fs.writeFile二、HTTP搭建服务器1、加载http核心模块2、使用http.createServer()方法创建Web服务器，返回一个Server实例3、服务器要干嘛: 接收请求、处理请求、发送响应(1) 接收请求4、
AJAX调用案例随笔（个人观看使用）
weixin_30906671的博客
07-18 84
<script type="text/javascript"> /*var contextpath = "http://192.168.0.103:8080/sjfxms2";*/ var contextpath = "http://192.168.3.5:8080/sjfxms2"; mui.init(); document.getElementById(...
使用FormData进行Ajax请求上传文件的实例代码
10-18
主要介绍了使用FormData进行Ajax请求上传文件的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery的ajax发送FormData的方式
01-23
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
FormData+Ajax实现上传进度监控
10-19
总结来说，`FormData`和`Ajax`结合使用，不仅能够实现无刷新的文件上传，还能通过监听`progress`事件实时展示上传进度，为用户提供更好的交互体验。在实际开发中，应根据具体需求调整上述代码，如添加错误处理、优化...
ajax使用formdata上传文件流
10-16
在本文中，我们将深入探讨如何使用Ajax和FormData对象来上传文件流。在现代Web开发中，用户经常需要在不刷新整个页面的情况下提交包含文件的数据，这时Ajax和FormData就显得尤为重要。 首先，`FormData`对象是HTML5...
Ajax 技术详解
tooytoos的博客
01-08 431
ajax技术的使用，与在jquery中使用ajax。
jQuery简单的Ajax调用实例
zhaizhai的博客
12-12 3201
实例1：调用本地文件&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="Public/js/jquery-easyui-1.3.1/jquery-1.8.2.min.js"&gt;&lt;/script&gt; &lt;script type="tex
Ajax的经典示例
鬼屋里的故事~.~
08-26 1265
   Ajax(Asynchronous JavaScript and XML)，使用户在使用Web程序时，不用在来来回回的Post了，可以近乎实时的从客户端收到服务器返回的信息，而无需刷新，极大的非富了用户的操作体验。                 XMLHttpRequest对象是Ajax的核心对象        不同的浏览器，建立对象的方式不同这里以IE为例        var requ
FromData---ajax提交数据
open_yu的博客
09-28 5678
一般想要不刷新页面提交数据时，可以使用ajax提交。如果数据量不大可以自己写json数据用ajax提交到后台服务，但是数据量多且需要动态添加数据时，自己写json格式数据就有点麻烦了，这时候就需要FormData来替我们完成数据的装载了。1、FormData提交表单数据$.ajax({ type : "post", url : URL, data :
ajax FormData
liangkexinhaha的博客
03-11 702
通过jQuery Ajax使用FormData对象上传文件 FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过
Ajax，FormData
qq_52179917的博客
06-14 3731
Ajax 的实现步骤：1. 创建ajax对象：new XMLHttpRequest();2. 告诉Ajax 对象要向哪里发送请求，以什么方式open 函数的两个参数，请求方式和请求地址open( 'get' , 'http://localhost:3000/dizhi' )3. 发送请求send()4. 获取服务器端响应到客户端的数据因为不可能发送完直接响应，所以需要绑定 onload 事件，响应成功之后会自动触发xhr.onload = function() {console.log( xhr.respo
FormData - 配合Ajax上传文件
sinat_34003720的博客
03-23 436
☘️ FormData ???? FormData- 介绍 使用Ajax发起请求，需要向后台传输数据，可以使用FormData。主要作用如下 向后台传输文件 传输字段 ???? FormData - API append(k,v) - 添加字段 delete(k) - 删除字段 forEach(callback(k,v)) - 遍历 get/getAll - 获取字段 ???? FormData - 创建 ????FormData - 手动创建 // 创建FormData let formDa
如何使用 formData 和 ajax 工具实现文件上传功能
06-09
要使用 formData 和 ajax 工具实现文件上传功能，你需要完成以下步骤： 1. 创建一个表单，包含一个文件上传表单项： ``` <form id="upload-form"> <input type="file" name="file" /> </form> ``` 2. 使用 FormData 对象构建表单数据： ``` const form = document.getElementById('upload-form'); const formData = new FormData(form); ``` 3. 使用 ajax 工具发送表单数据： ``` const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function () { // 文件上传成功的处理逻辑 }; xhr.onerror = function () { // 文件上传失败的处理逻辑 }; xhr.send(formData); ``` 在这个例子中，我们使用了 XMLHttpRequest 对象来发送 ajax 请求。你也可以使用其他的 ajax 工具，例如 jQuery 的 $.ajax 方法或 axios 库。 在服务器端，你需要处理文件上传请求，并将文件保存到服务器上。具体的实现方式取决于你使用的后端框架和语言。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值