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

冷不防 2022-06-10 12:43 196阅读 0赞

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>