ajax 实战使用
注意ajax 必须放在script脚本中使用
ajax用于前端朝后端提交数据,并且后端函数处理好结果返回给success函数作为回调函数给前端,前端拿到后端传来的值,比如code==0 来做相应的前端渲染
Ajax
局部刷新
异步提交
ajax提交数据基本写法
$('#b1').click(function(){
$.ajax({
url:'', # 不写默认朝当前路径提交
type:'post', # 提交数据的方式
data:{'name':'jason'},
success:function(data){
console.log(data)
}
})
})
前端提交数据的编码方式------------->contentType
urlencoded name=jason&pwd=123&xxx=xxx
formdata 文件格式
application/json {"name":"jason"}
注意:在写web相关的项目的时候,一定要指定你提交的数据到底是什么编码格式
你在提交数据的时候,不能骗后端
ajax提交提交json格式数据
$('#b1').click(function(){
$.ajax({
url:'', # 不写默认朝当前路径提交
type:'post', # 提交数据的方式
data:JSON.stringify({'name':'jason'}),
contentType:'application/json'
success:function(data){
console.log(data)
}
})
})
ajax上传文件
1.上传文件需要使用内置对象FormData
$("#btn").click(function () {
//上传文件,必须用FormData,生产一个formdata对象
var formdata=new FormData();
formdata.append('name',$("#name").val()); # 也支持传键值对的数据
//取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
formdata.append('myfile',$("#myfile")[0].files[0]);
$.ajax({
url:'/index/',
type:'post',
//不预处理数据,(name=lqz&age=18)
processData:false,
//指定往后台传数据的编码格式(urlencoded,formdata,json)
//现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了
contentType:false,
data:formdata,
success:function (data) {
alert(data)
}
})
ajax 实战使用的更多相关文章
- JQuery+Ajax实战三级下拉列表联动(八)
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- Ajax 实战(一)
目录 Ajax 实战(一) 简介 入门案例 基于Ajax进行登录验证 HTTP请求编码格式和报文 Content-Type=application/x-www-form-urlencoded Cont ...
- Ajax实战(原生)
/** 之前一直在学习ajax,也拿jQuery写了很多,感觉还是写原生的对基础的理论理解的深刻.特此书写. * 得到ajax对象 */ function getajaxHttp() { var xm ...
- AJAX 实战【三级联动】分析
使用 AJAX 对全国地名进行选取 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo ...
- ajax实战用法详解
谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...
- node+ajax实战案例(6)
8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...
- node+ajax实战案例(5)
6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...
- node+ajax实战案例(4)
4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...
- node+ajax实战案例(3)
3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...
随机推荐
- css雪碧图实现数字切换
vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...
- java基础学习笔记一
一.JAVA访问控制修饰符 用于控制类中成员的可见性 1.public(公有):在任何地方可以访问 2.protected(受保护的):子夫类(即使字父类不在同一包)和本包中可以访问 3.defaul ...
- 【JS】JS以及CSS对页面的阻塞
一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...
- AcWing 234. 放弃测试 (01分数规划)打卡
题目:https://www.acwing.com/problem/content/236/ 题意:给你一个方程,可以有k个不选,要求最优 思路:看了一下这个方程就知道是01分数规划的模板题,它可以选 ...
- XAMPP安装和配置
一.XAMPP安装: 下载地址:https://www.apachefriends.org/zh_cn/index.html 二.修改MySQL数据库 1.更改Apache中数据库端口号 保存后重新启 ...
- Kubernetes 技能图谱skill-map
# Kubernetes 技能图谱 ## Container basics (容器技术基础)* Kernel* Cgroups* Userspace runtime* Image* Registry ...
- 5、java操作xml,dom4j
. 1.首先在项目路径下引入dom4j-1.6.1.jar和jaxen-1.1-beta-6.jar包,jaxp方式解析xml文件 <?xml version="1.0" e ...
- 使用 twine 上传自己的 python 包到 pypi
打包检查 python setup.py check 打包 python3 setup.py sdist build 上传 twine upload dist/* twine 安装: pip inst ...
- javascript拷贝创建对象
/*拷贝创建对象*/ function hightExtend() { var key = 0, i = 0, len = arguments.length; target = null; if ...
- nginx安装教程(详细)
所见即所得编辑器, editorhtml{cursor:text;*cursor:auto} img,input,textarea{cursor:default}.cke_editable{curso ...