AJAX - 经典ASP - 发表表格

时间:2016-04-08 01:27:07

标签: javascript ajax forms post asp-classic

我有一个带有此代码的TEST.ASP:

<HTML>
<HEAD>
    <SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
    <FORM action="action_page.asp" method="post">
        First Name:<BR>
        <INPUT type="text" name="FName"><BR>
        Last Name:<BR>
        <INPUT type="text" name="LName"><BR>
        <INPUT type="submit" value="Submit">
        <BUTTON type="button" onClick="loadXMLDoc('action_page.asp',this.form);">GoGoGo!</BUTTON>
    </FORM>
    <DIV id="msgBoxDiv">TEST!!</DIV>
</BODY>
</HTML>

调用的Javascript文件(ajaxScript.js)具有以下代码:

var req; // global variable to hold request object

function processReqChange()
{
    if (req.readyState == 4 && req.status == 200){document.getElementById("msgBoxDiv").innerHTML = req.responseText;}
}

function loadXMLDoc(url, params)
{
    if(window.XMLHttpRequest)
    {
        try
        {
            req = new XMLHttpRequest();
        } catch(e)
            {
                req = false;
            }
    }
    else
    {
        req = false;
    }

    if(req)
    {
        var formData = new FormData(params);

        req.onreadystatechange = processReqChange;
        req.open("POST", url, true);
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(formData);
        return true;
    }
    return false;
}

接收参数的“action_page.asp”就像这样:

<%
    vRF1 = request.Form("FName")
    vRF2 = request.Form("LName")
%>

<HTML>
    <HEAD>

    </HEAD>
    <BODY>
        First:<%=vRF1%><BR>
        Last:<%=vRF2%>
    </BODY>
</HTML>

如果我进行正常提交(提交按钮),一切都按预期进行:它会显示一个包含表单值的新页面。

但是......如果我尝试用AJAX(gogogo按钮)读取目标ASP,我就无法将表单发送到目标页面。我确实收到目标页面,但没有假定的值。 我明白了:
Result page

如果我更改“req.send(formData);” for“req.send(”FName =“+ 1 +”&amp; LName = QWER“);”,一切运作良好。

我已经读过要发送整个表单(就像“通常的”帖子那样),我只需要制作“var formData = new FormData(params);”其中params将是表单对象,然后发送FormData(params)。

我可能在这里做错了什么?

2 个答案:

答案 0 :(得分:0)

我不想在没有回答的情况下离开这个。

Lankymart给出了正确答案的道路......事实是,当我提交了#34;新的FormData(formID)&#34;我发送的是multipart / form-data而不是application / x-www-form-urlencoded。我正在宣布。

... SO 我们可以假设Lankymart表示(application / x-www-form-urlencoded)。 换句话说,你只需要我的初始问题,并在req.send();你必须形成要传递的参数的字符串(就像在GET请求中一样)。 &#34; NAME1 =&#34 + +参数1&#34;&安培;名称2 =&#34 + param2的。 我选择了这个,因为,根据我的需要,这已经足够了。

... OR 如果我们确实需要/希望发送表单 - req.send(formData)...将产生multipart / form-data(在这里检查multipart / form-data的格式示例:http://www.codeproject.com/Articles/1125/Advanced-ASP-Uploader ) 在这种情况下......你必须为信息构建一个解析器。 这是我编写的内容(只是为了尝试一两件事):

Function StoreNameAndValues(tempVarArray)
    Dim tempVar

    for i = 1 to ubound(tempVarArray)-1
        if tempVarArray(i)<>"" then
            tempVar=Split(tempVarArray(i), """")

            if ubound(tempVar)>1 then
                postNamesArray(i-1)=tempVar(1)
                postValuesArray(i-1)=StripString(tempVar(2),CHR(13)&CHR(10))
            End if
        End if
    next
End Function


tempVar=Request.TotalBytes
tempVar1=Request.BinaryRead(tempVar)

tempVar1=SimpleBinaryToString(tempVar1)

separator=Split(tempVar1, CHR(13)&CHR(10))(0)
tempVar2=Split(tempVar1,separator)

postArgumentsSize=ubound(tempVar2)-1
Dim postNamesArray()
Dim postValuesArray()
ReDim Preserve postNamesArray(postArgumentsSize)
ReDim Preserve postValuesArray(postArgumentsSize)

StoreNameAndValues(tempVar2)

在这个例子中,我构建了一个非常简陋的解析器......它没有为文件上传等事情做好准备,但这只是一个例子。

希望我没有犯任何重大错误......它会帮助某人。

答案 1 :(得分:0)

在四处搜寻并尝试了各种方法之后,这篇文章终于使我走上了正确的轨道。我经典的asp页面根本不会阅读我发送给它的ajax表单帖子。

最终使它起作用的是ajax函数中的contentType: 'application/x-www-form-urlencoded; charset=UTF-8',。因此,这就是我最终发送表单的方式,而经典的asp页面将按应有的方式读取所有值。

    $('#subdel').click(function () {
      // get values outside of the form
      var tDate = $('#datepicker').val();
      var tCID = $('#Client').val();
      var vFD = $('#dataentry').serialize();
      // add those values to the form
      vFD = vFD + '&C=' + tCID;
      vFD = vFD + '&D=' + tDate;
      $(function() {
         var request = $.ajax({
            url: 'api/saveDLR.asp',
            type: 'POST',
            data: vFD,
            processData: false,
            contentType: false,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            cache: false,
            success: function (response) {
               // hide some parts of the page, and then show the result from saving the form
               $('#cldel').hide("slow");
               $('#endel').hide("slow");
               $("#encon").html( response );
               $('#encon').show("slow");
               // refresh a table after the form was processed
               $(function() {
                   var request = $.ajax({
                   url: "/api/getDelClient.asp?C=" + tCID + "&D=" + tDate,
                   type: "GET",
                   dataType: "html",
                   success: function (response) {
                      $("#cldel").html( response );
                      $('#cldel').show("slow");
                   },
                   error: function (response) {
                      alert(response.responseText);
                   }
                   });
               });
            },
            error: function (response) {
                  alert(response.responseText);
            }
         });
      });
   });

也许(仍然)可以帮助其他人。

asp页面仅使用Request.Form读取表单数据

<%  For Each item In Request.Form
      Response.Write item & " - " & Request.Form(item) & "<br/>"
    Next
%>