表单和AJAX

动画:

Params参数定义形成动画的css属性。

可选的speed参数规定效果的时长。

可选的callback参数是动画完成后所执行的函数名称

表单提交:

Method:规定用于发送表单的HTTP方法

Action:规定当提交时向何处发送表单数据

两种提交方式:get提交和post提交

Get请求:

请求参数放到请求的地址后面。参数大小受限只能传递几k的数据

Post提交:

请求参数放到请求体里面,参数大小没有限制。由于请求参数不可见,所以安全性更高。但是速度较慢.应用场景:当form表单指定请求方式为post时发出请求。

Get与post的区别:

get方法是用来从服务器上获取数据;而post是用来向服务器上传递修改数据。

两者传递参数的方式不一样,get 是将数据直接添加到.action所指向的URL后面;而post是将数据放在form 的数据体中。

get是不安全的,因为在传输数据的过程中数据直接暴露在请求的URL上,用户可以在浏览器上看到提交的数据,还有一些系统内部信息也会显示在用户面前;而post的所有操作,用户都是不可见的。

get提交传输的数据量少,受限于URL的长度限制;而post提交没有数据量限制。

get提交方式获取数据后刷新不会有负面影响;而post 提交刷新页面重复提交可能会产生不良的后果。

表单提交的原则:

表单提价主要是通过表单元素的name=value进行传递数据的。

Name相同的表单提交格式:

如果name值相同的表单提交,该name值会出现多次,且对应不同表单的值。

没有name的表单、含有disabled的表单元素

表单元素没有name属性、含有disabled属性都会被禁止提交

Radio、checkbox选中值缺没有value属性

Radio、checkbox选中值却没有value属性,提交时智慧提示当前name表单为on,

不会自动获取text的值,如果没有选中的值,则不会提交该表单元素,即不会出现当前name表单为off的情况

表单提交事件

Submit()方法触发submit事件。

表单序列化

Serialize()方法通过序列化表单值创建URL编码文本字符串。

SerializaArray()方法通过序列化表单值来创建对象(name和value)的数组

常用插件

SuperSlide.js

Swiper.js

纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Wow.js

实现了在网页滚动时的动画效果。需要Animate.css项目的支持。

同步与异步的区别

同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。

同步就相当于是当客户端发送请求给服务端,在等待服务端响应的请求时,客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

异步就相当于当客户端发送给服务端请求时,在等待服务端响应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率。

同步是阻塞模式,异步是非阻塞模式。

AJAX技术

AJAX是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

AJAX的特点

优点:

可以无需刷新页面,与服务器进行通信

允许依据用户事件来更新部分页面内容。

缺点:没有浏览历史,不能回退

存在跨域问题(同源)

SEO不友好(搜索引擎优化,对爬虫不友好)。

AJAX的原理

客户端发送请求,请求交给XMLhttprequest,XMLhttprequest把请求提交给服务,服务器进行业务处理,服务器响应数据交给XMLhttprequest对象,XMLhttprequest对象接收数据,由javascript把数据写到页面上。

Ajax工作流程:

  1. 创建Ajax对象
  2. 判断数据的传输方式
  3. 获得响应

responseText获得字符串形式的响应数据

ResponseXML获得XML形式的响应数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力回答你的问题。首先,如果你想通过 AJAX 提交图片数据到后台,你需要使用 FormData 对象。这个对象可以让你将单数据和文件一起发送到服务器。 下面是一个基本的示例代码,展示了如何使用 FormData 对象来提交图片数据: ``` var formData = new FormData(); formData.append('image', $('#imageInput')[0].files[0]); $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { console.log('Image uploaded successfully.'); }, error: function(xhr, status, error) { console.log('Error uploading image: ' + error); } }); ``` 在上面的代码中,我们首先创建了一个 FormData 对象,然后将我们选择的图片文件添加到了这个对象中。接下来,我们使用 jQuery 的 ajax() 函数来发送这个数据到服务器。 注意,在 ajax() 函数中,我们将 processData 和 contentType 参数都设置为 false。这是因为我们想要将数据发送到服务器,而不是让 jQuery 自动处理它。如果我们不将这些参数设置为 false,jQuery 将会将 FormData 对象转换为字符串,这样就无法正确地发送图片数据了。 接下来,让我们来看一下后台如何获取这个图片数据。如果你使用的是 Node.js,可以使用 multer 中间件来处理上传的文件数据。下面是一个示例代码,展示了如何在 Node.js 中使用 multer 来处理上传的图片文件: ``` const multer = require('multer'); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('image'), (req, res) => { console.log(req.file); res.send('Image uploaded successfully.'); }); ``` 在上面的代码中,我们首先使用 multer 中间件来处理上传的文件数据。我们将上传的文件保存到了 uploads 目录中。然后,我们定义了一个路由,使用 upload.single() 方法来处理上传的单个文件。在路由处理函数中,我们可以通过 req.file 对象来获取上传的文件信息。 以上是一个基本的示例代码,展示了如何使用 AJAX 提交图片数据到后台,并在后台获取这个数据。如果你想了解更多关于 AJAX 和文件上传的知识,建议你查阅相关的文档和教程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值