关于表单提交

[wumylove1234]

我现在有个需求,就是提供一个JS函数供客户端调用,然后在函数里发起一个XMLHttpRequest的Post请求,向服务器提交数据.

看似简单,但是我参考了资料后发现这其实不能够满足ASP.Net对其生命周期的要求,我的Post只提交了我自己的数据,而当前页面的Form里的东西没有提交,到了后台则认为是一个新的请求,以至于我不可以得到各控件的值和ViewState的值.

那问题就是,我如何能够将当前页面的Form连和我自己的请求一起发送回去?然后我要得到页面的ResponseText(因为我要处理反回值).

[wumylove1234]

//同步回调提交

//var theForm = document.forms[0];

var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;

var __theFormPostData = "";
var __theFormPostCollection = new Array();

function WebForm_InitCallback()
{
var theForm=document.forms[0];

var count = theForm.elements.length;
var element;
for (var i = 0; i < count; i++)
{
element = theForm.elements[i];
var tagName = element.tagName.toLowerCase();
if (tagName == "input")
{
var type = element.type;
if ((type == "text" || type == "hidden" || type == "password" ||
((type == "checkbox" || type == "radio") && element.checked)) &&
(element.id != "__EVENTVALIDATION"))
{
WebForm_InitCallbackAddField(element.name, element.value);
}
}
else if (tagName == "select")
{
var selectCount = element.options.length;
for (var j = 0; j < selectCount; j++)
{
var selectChild = element.options[j];
if (selectChild.selected == true)
{
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}
else if (tagName == "textarea")
{
WebForm_InitCallbackAddField(element.name, element.value);
}
}
}

function WebForm_InitCallbackAddField(name, value)
{
var nameValue = new Object();
nameValue.name = name;
nameValue.value = value;
__theFormPostCollection[__theFormPostCollection.length] = nameValue;
__theFormPostData += name + "=" + WebForm_EncodeCallback(value) + "&";
}

function WebForm_EncodeCallback(parameter)
{
if (encodeURIComponent)
{
return encodeURIComponent(parameter);
}
else
{
return escape(parameter);
}
}

function WebForm_DoCallback(eventArgument)
{
//初始化回调,得到ViewState及Form中其它的控件值

WebForm_InitCallback();
var theForm=document.forms[0];

var postData = __theFormPostData +
"__CALLBACKID=" + WebForm_EncodeCallback('__Page') +
"&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
if (theForm["__EVENTVALIDATION"]) {
postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
}
var xmlRequest,e;
try
{
xmlRequest = new XMLHttpRequest();
}
catch(e)
{
try
{
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}

xmlRequest.open("POST", theForm.action, false);
xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(postData);

if (xmlRequest.status==200)
{
var response=xmlRequest.responseText;

if (response.charAt(0) == "s")
{
return response.substring(1);
}
else if (response.charAt(0) == "e")
{
//异常
response.substring(1);
}
else
{
var separatorIndex = response.indexOf("|");
if (separatorIndex != -1)
{
var validationFieldLength = parseInt(response.substring(0, separatorIndex));
if (!isNaN(validationFieldLength))
{
var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);
if (validationField != "")
{
var validationFieldElement = theForm["__EVENTVALIDATION"];
if (!validationFieldElement)
{
validationFieldElement = document.createElement("INPUT");
validationFieldElement.type = "hidden";
validationFieldElement.name = "__EVENTVALIDATION";
theForm.appendChild(validationFieldElement);
}
validationFieldElement.value = validationField;
}

return response.substring(separatorIndex + validationFieldLength + 1);
}
}
}
}
}

同步调用的.后台的页面需要继承ICallBackHandle,做这个只为满足我的需求,所以只是同步的调用,得到服务器返回值后,我的JS函数还需要继续执行.我发现,只要将__ViewState的Form值提交回去,服务器就会认为是PostBack了.还要连同Form里的值都传回去,这样才能正确的LoadPostData,才能够支持Asp.net完成完整的生命周期.当然,我这里没有让它完成完整的生命周期,因为我发现用这个回调的形式,更容易让我得处理反回值,而且返回的就是我需要的数据,所以效率也最高.呵

[wumylove1234]

好久没来CSDN,原来也可以格式化显示代码了,重粘一下.

//同步回调提交

//var theForm = document.forms[0];

var __pendingCallbacks = new Array();
var __synchronousCallBackIndex = -1;

var __theFormPostData = "";
var __theFormPostCollection = new Array();

function WebForm_InitCallback() 
{
    var theForm=document.forms[0];
    
    var count = theForm.elements.length;
    var element;
    for (var i = 0; i < count; i++) 
    {
        element = theForm.elements[i];
        var tagName = element.tagName.toLowerCase();
        if (tagName == "input") 
        {
            var type = element.type;
            if ((type == "text" || type == "hidden" || type == "password" ||
                    ((type == "checkbox" || type == "radio") && element.checked)) &&
                    (element.id != "__EVENTVALIDATION")) 
            {
                WebForm_InitCallbackAddField(element.name, element.value);
            }
        }
        else if (tagName == "select") 
        {
            var selectCount = element.options.length;
            for (var j = 0; j < selectCount; j++) 
            {
                var selectChild = element.options[j];
                if (selectChild.selected == true) 
                {
                    WebForm_InitCallbackAddField(element.name, element.value);
                }
            }
        }
        else if (tagName == "textarea") 
        {
            WebForm_InitCallbackAddField(element.name, element.value);
        }
    }
}

function WebForm_InitCallbackAddField(name, value) 
{
    var nameValue = new Object();
    nameValue.name = name;
    nameValue.value = value;
    __theFormPostCollection[__theFormPostCollection.length] = nameValue;
    __theFormPostData += name + "=" + WebForm_EncodeCallback(value) + "&";
}

function WebForm_EncodeCallback(parameter) 
{
    if (encodeURIComponent) 
    {
        return encodeURIComponent(parameter);
    }
    else 
    {
        return escape(parameter);
    }
}

function WebForm_DoCallback(eventArgument) 
{
    //初始化回调,得到ViewState及Form中其它的控件值
    
    WebForm_InitCallback();                 
    var theForm=document.forms[0];
    
    var postData = __theFormPostData +
                "__CALLBACKID=" + WebForm_EncodeCallback('__Page') +
                "&__CALLBACKPARAM=" + WebForm_EncodeCallback(eventArgument);
    if (theForm["__EVENTVALIDATION"]) {
        postData += "&__EVENTVALIDATION=" + WebForm_EncodeCallback(theForm["__EVENTVALIDATION"].value);
    }
    var xmlRequest,e;
    try 
    {
        xmlRequest = new XMLHttpRequest();
    }
    catch(e) 
    {
        try 
        {
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
        }
    }

    xmlRequest.open("POST", theForm.action, false);
    xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlRequest.send(postData);
    
    if (xmlRequest.status==200)
    {
        var response=xmlRequest.responseText;

        if (response.charAt(0) == "s") 
        {
            return response.substring(1);
        }
        else if (response.charAt(0) == "e") 
        {   
            //异常
            response.substring(1);
        }
        else 
        {
            var separatorIndex = response.indexOf("|");
            if (separatorIndex != -1) 
            {
                var validationFieldLength = parseInt(response.substring(0, separatorIndex));
                if (!isNaN(validationFieldLength)) 
                {
                    var validationField = response.substring(separatorIndex + 1, separatorIndex + validationFieldLength + 1);
                    if (validationField != "") 
                    {
                        var validationFieldElement = theForm["__EVENTVALIDATION"];
                        if (!validationFieldElement) 
                        {
                            validationFieldElement = document.createElement("INPUT");
                            validationFieldElement.type = "hidden";
                            validationFieldElement.name = "__EVENTVALIDATION";
                            theForm.appendChild(validationFieldElement);
                        }
                        validationFieldElement.value = validationField;
                    }

                    return response.substring(separatorIndex + validationFieldLength + 1);
                }
            }
        }
    }
}

[tm62490309]

没看懂。。帮忙顶上来

[wumylove1234]

补充一下,这个其实应该是Ajax的原理吧?让ASP.Net完成一个完整的生命周期.

[greatverve]

如果用js改变了客户端的值,用个hidden保存,就能把全部数据发送到服务器.

[wumylove1234]

请给出示例代码呀.

[lfywy]

这个简单，可以结合WEBSERVICE一起使用更方便，最好贴出代码让大家看看你的详细情况

[greatverve]

//设置标记,如果客户端改变的话.
function mark()
{
    var hd=getById('HF1');
    hd.value='0';
}

[greatverve]

//设置标记,如果客户端改变的话.
function mark()
{
    var hd=getById('HF1');
    hd.value='0';
}

[namhyuk]

,我的Post只提交了我自己的数据,而当前页面的Form里的东西没有提交,到了后台则认为是一个新的请求
-----------------------------
你是怎么确认的？

[wumylove1234]

关键是模仿Asp.net的页面的生命周期,要把ViewState和Form里的东西提交上去,还要让它明白这个PostBack回来的.呵呵.我可能是解决了,照抄Asp.net的异步回调方法.等全部试验成功后结帖.

[greatverve]

//设置标记,如果客户端改变的话.
function mark()
{
    var hd=getById('HF1');
    hd.value='0';
}

[greatverve]

怎么发了三次,刷新一下就一次?

[namhyuk]

[Quote=引用 8 楼 wumylove1234 的回复:]
关键是模仿Asp.net的页面的生命周期,要把ViewState和Form里的东西提交上去,还要让它明白这个PostBack回来的.呵呵.我可能是解决了,照抄Asp.net的异步回调方法.等全部试验成功后结帖.
[/Quote]
有点意思。到时一定记得分享啊。很好奇。

[mengerhxy]

ajax应该没问题，能实现你的要求。