ajax 请求后台数据(及使用FormData对象提交表单及上传图片)

js
        <script type="text/javascript"> $(function(){ $('#submit').click(function(){ var username = $('#username').val(); var password = $('#password').val(); var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var url = 'http://localhost/PHP_pro/ci/user/login'; var data = "username=" + username + "&password=" + password; //注意等号左右边不要留有空格!!! xhr.open('post',url,true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(data); xhr.onreadystatechange = function() { if (xhr.readystate == 4) { if (xhr.status == 200) { alert(responseText); } } } }); }); </script>

    Jquery
        <script type="text/javascript"> $(function(){ $('#submit').click(function(){ var username = $('#username').val(); var password = $('#password').val(); $.ajax({ data:{"username":username,"password":password,"first":false},//要发送的数据  type:"POST",//发送的方式  url:"login",//URL地址  error:function(msg){ //处理出错的信息  var errormessage="再试一次"; $(".loginerror").html(errormessage); },success:function(msg){ //处理正确时的信息  //alert("success" + msg)  alert(msg); if(msg=='登录成功'){ var errormessage="登录成功"; $(".loginerror").html(errormessage); location.href = "user_center" }else{ var errormessage="用户名或密码错误"; $(".loginerror").html(errormessage); } } }); }); </script>

使用html5 FormData对象提交表单及上传图片
把以上2种方式中的数据替换成formdata即可!

var formdata = new FormData();  
formdata.append('name','fdipzone');  
formdata.append('gender','male'); 
或者
var form = document.getElementById('form1'); 
var formdata = new FormData(form); 
     ps:<form id='form1'>...</form>

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...