ajax怎么让页面跳出遮罩层修改数据后提交到后台

ajax怎么让页面跳出遮罩层修改数据后提交到后台,第1张

遮罩层:

<div id="zezhao">

<form id='biaodan'>

<input type='text' size='200' id='text'>

<input type='submit' value='提交'>

</form>

</div>

function send(){

var url = "提交的页面.php"

var fm = document.getElementById('biaodan')

var data = new FormData(fm)

var xhr = new XMLHttpRequest()

xhr.onreadystatechange = function(){

if(xhr.readyState==4){

if(xhr.status == 200){

//表单域信息归位

//document.getElementById('content').value=""//消息

//3秒后使得发表留言的信息消失

//setTimeout("hideresult()",3000)

}

}}

//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.open('post',url,true)

xhr.send(data)

}

//如果你用数据库显示,下面的就不需要了。

function getmessage(){

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

//实际 *** 作

result.innerHTML += xhr.responseText

}

result.scrollTop = result.scrollHeight

}

/* var show = document.getElementById('result')

show.innerHTML= */

}

//发送请求

xhr.open('get','提交的页面.php',true)

xhr.send()

}

window.onload = function(){

getmessage() //修改后原页显示

}

ajax里面有一个属性是async

async代表是否异步,当你把他设置为false的时候,则非异步即同步,也就是js代码运行到这里的时候,所有的页面代码都不会加载,当ajax传回数据后,页面代码才恢复加载,在这之前符合题主的题目要求。

async的默认值为true,即为异步。

当然如果题主非要是异步完成所问需求的话,那么可以在执行前加一个遮罩层,这样加载的时候就点不动其他地方了,加载结束后让遮罩层关闭即可。

顺便说一下,如果页面有太多ajax请求,都为同步的话,页面会比较慢,照成用户体验不好的哦。

function send(){

    $('body').append('<div id="layer"></div>')

    $.ajax({  

        url:'#',

        data:{},  

        type:'post',  

        dataType:'json',  

        success:function(data){

            hideLayer()

        },  

        error : function(){  

            hideLayer()

        }  

    })

}

function hideLayer(){

    $('#layer').remove()

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11499499.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存