注意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. css雪碧图实现数字切换

    vue中 css 雪碧图应用及数字切换demo 1. CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分. 2.使用css雪碧图的优点: 利用CSS Sp ...

  2. 初识localstorage用法

    最近在做一个类似填报信息的页面,一共有8页,当点击切换到下一页的时候要求把上一页的数据存到本地,以便下次切换到这个页面的时候自动把值填上去,并且在最后一页提交数据的时候直接用localstorage里 ...

  3. UNP学习第六章(二)

    一.描述符就绪条件 对于引起select返回套接字“就绪”的条件我们必须讨论得更明确: (1)满足一下塞个条件中的仍和一个时,一个套接字准备好读. a)该套接字接收缓冲区中的数据字节数不大于等于套接字 ...

  4. winserver安装zabbixAgent

    zabbix 布署实践[8 监控windows server]   参考http://www.cnblogs.com/likehua/p/3968689.html的思路,我安装的是zabbix 3.0 ...

  5. windows环境下如何安装memcached教程

    Memcached 是一个开源免费高性能的分布式内存对象缓存系统,能够加快网站访问速度和减轻数据库压力,本文向大家介绍下windows环境下如何安装memcached. 工具/原料   memcach ...

  6. JS-text节点模拟innerHTML属性

    # [在线预览](https://jsfiddle.net/1010543618/mz7ybu8g/2/) text 节点无 innerHTML 这个属性!!! 如果直接修改 text 节点的属性(d ...

  7. Kafka启动报错

    文章目录 问题 解决 问题 通过 ./kafka-server-start.sh ../config/server.properties 启动kafka 之前在server.properties中修改 ...

  8. 1.tensorflow——线性回归

    tensorflow 1.一切都要tf. 2.只有sess.run才能生效 import tensorflow as tf import numpy as np import matplotlib.p ...

  9. 19. HTTP协议二:HTTP请求与响应、常见状态码

    HTTP请求与响应 HTTP请求 HTTP请求是指从客户端到服务器端的请求消息.HTTP请求主要由三部分构成,请求行.请求头(headers).body(请求数据). 上图是笔者用Charles抓包工 ...

  10. haproxy附加

    1.安装haproxy yum -y install haproxy 2.编写文件  vim /etc/haproxy/haproxy.cfg