注意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 实战使用的更多相关文章

  1. JQuery+Ajax实战三级下拉列表联动(八)

    本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...

  2. Ajax 实战(一)

    目录 Ajax 实战(一) 简介 入门案例 基于Ajax进行登录验证 HTTP请求编码格式和报文 Content-Type=application/x-www-form-urlencoded Cont ...

  3. Ajax实战(原生)

    /** 之前一直在学习ajax,也拿jQuery写了很多,感觉还是写原生的对基础的理论理解的深刻.特此书写. * 得到ajax对象 */ function getajaxHttp() { var xm ...

  4. AJAX 实战【三级联动】分析

    使用 AJAX 对全国地名进行选取 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo ...

  5. ajax实战用法详解

    谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...

  6. node+ajax实战案例(6)

    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...

  7. node+ajax实战案例(5)

    6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...

  8. node+ajax实战案例(4)

    4.用户登录实现 4.1.用户登录实现思路 1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台 2 后台接到用户输入的登录信息,把这些信息拿去和数 ...

  9. node+ajax实战案例(3)

    3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...

随机推荐

  1. 数据结构---Java---HashMap---JDK1.7

    源码解读 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Clone ...

  2. 搭建ELK和EFK

    公司突然发下任务让我搭建elk和efk,于是做完之后写入了博客,生产环境下,亲测可用哦 搭建ELK 一共两台服务器,一个节点(logstash) 主服务器上 修改最大链接和最大打开的文件 1.临时修改 ...

  3. Tomcat负载均衡图片显示不正常解决方法

    在部署一个Tomcat玩玩的时候,发现在做nginx负载均衡时,网站显示不正常,图片会变得很大.测试了半天都没成功,最后查找资料,才发现Tomcat负载均衡时Session处理有问题,Session是 ...

  4. Kubernetes v1.16 对API的更改

    前段时间安装Kubernetes v1.16.2,然后从v1.14版本的拷贝yaml文件过来执行,很多都报没有相应的api,查看一下新版本的api admissionregistration.k8s. ...

  5. python 线程,进程与协程

    引言 线程 创建普通多线程 线程锁 互斥锁 信号量 事件 条件锁 定时器 全局解释器锁 队列 Queue:先进先出队列 LifoQueue:后进先出队列 PriorityQueue:优先级队列 deq ...

  6. vue之slot用法

    slot元素作为组件模板之中的内容分发插槽.这个元素自身将被替换. 有 name 特性的 slot 称为具名 slot. 有 slot 特性的内容将分发到名字相匹配的具名 slot. 一.单个组件 如 ...

  7. WebX.0:Web1.0

    ylbtech-WebX.0:Web1.0 web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在技术创新主导模式.基于点击流量的盈利 ...

  8. 8、数值分析与matlab

    1.今天要拷matlab代码了,而且是很恶心的算法,估计也没几个人能看得懂,就连我自己都看不懂. 我也不知道这样做的意义何在,可能只是证明我在这世上曾经学过那么那么难的东西吧 首先是一个matlab版 ...

  9. mybatis PageBounds应用分页

    第一步:分页工具类 package com.smartmorse.vo; import java.util.HashMap; import java.util.List; import java.ut ...

  10. 用php写爬虫去爬数据

    参考文档1 参考文档2 这里是我自己写的一个小需求 <?php /** 采集http://www.959.cn/school,即时更新的最新的文章内容:每分钟采集一次.采集结束后实时入库并展示. ...