通过 ajax 调用 asp 文件时从 xsl 获取表单值

Question

我的项目是发送包含名字和联系方式的电子邮件，这些信息来自表单，点击提交按钮后页面不应重定向。（为此我使用了 ajax）。但是当我通过 ajax 调用经典 asp 文件（将发送电子邮件）时，我无法获取表单值。如果我将 asp 文件路径放在操作标签中，那么它工作正常，我能够获取姓名和联系方式，但页面重定向，这是我不想要的。

请帮我获取 asp 中的表单值。

如果你看到我的代码，你可能会更好地理解。

P.S：我没有使用 jquery。

工作正常的代码（HTML 和 asp）

HTML

<!DOCTYPE html>
<html>
<body>
<form method="post" action="sendEmail.asp">
   <input type="text" name="name" id="name" />
    <input type="text" name="email" id="email" />
    <input type="submit" value="Submit" />
</form>
</body>
</html>

ASP

<%

Dim fname
fname=Request.form("name")
If fname<>"" Then

Set myMail=CreateObject("CDO.Message")
myMail.Subject="Customer enquiry for store champion"
myMail.From="abc@gmail.com"
myMail.To="abc@gmail.com"
myMail.Bcc="abc@gmail.com"
myMail.Cc="abc@gmail.com"
myMail.TextBody="This is a message from customer" & fname &". Please get in   touch with the customer using email"


myMail.Configuration.Fields.Item     ("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1 'basic   (clear-text) authentication 
myMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = 1

myMail.Configuration.Fields.Item    ("http://schemas.microsoft.com/cdo/configuration/sendusername") ="abc@gmail.com" 
myMail.Configuration.Fields.Item   ("http://schemas.microsoft.com/cdo/configuration/sendpassword") ="Thp@dminuser" 
myMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusing")=2
'Name or IP of remote SMTP server
myMail.Configuration.Fields.Item     ("http://schemas.microsoft.com/cdo/configuration/smtpserver")="smtp.gmail.com"
'Server port
myMail.Configuration.Fields.Item     ("http://schemas.microsoft.com/cdo/configuration/smtpserverport")=25
myMail.Configuration.Fields.Update
myMail.Send
set myMail=nothing
End If
%>

不起作用的代码（xsl、JS 和顶部相同的 asp）

XSL（xsl完美无须调试，仅供参考）

<xsl:element name="form">
                <xsl:attribute name="name">ccform</xsl:attribute>
                  <xsl:attribute name="method">post</xsl:attribute>
                  <xsl:attribute name="onsubmit">return validateform(this);</xsl:attribute>



                  <xsl:element name="input">
                    <xsl:attribute name="type">text</xsl:attribute>
                    <xsl:attribute name="class">name</xsl:attribute>
                    <xsl:attribute name="placeholder">Name</xsl:attribute>
                    <xsl:attribute name="name">name</xsl:attribute>
                  </xsl:element>

                  <xsl:element name="input">
                    <xsl:attribute name="type">text</xsl:attribute>
                    <xsl:attribute name="class">email</xsl:attribute>
                    <xsl:attribute name="placeholder">Email or Phone</xsl:attribute>
                    <xsl:attribute name="name">email</xsl:attribute>
                  </xsl:element>

                  <xsl:element name="button">
                    <xsl:attribute name="type">submit</xsl:attribute>
                    <xsl:attribute name="class">submitbutton</xsl:attribute>
                    Submit
                  </xsl:element>

            </xsl:element>

Javascript

Ajax in javascript (ajax in javascript 完美无须调试贴出来供参考)

function load(u,method,cb,data) { 
    "use strict";
    var xhr, V, i;
    method = method || 'GET';
    data = data || '';

    function ensureReadiness() {
        if (xhr.readyState < 4) {
            return; 
        }
        if (xhr.status !== 200) {
            return; 
        }
        if (xhr.readyState === 4) { 
            cb(xhr); 
        } 
    }

    if (typeof XMLHttpRequest !== 'undefined') { 
        xhr = new XMLHttpRequest(); 
    } else { 
        V = ["Microsoft.XmlHttp", "MSXML2.XmlHttp.2.0",     
             "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", 
             "MSXML2.XmlHttp.5.0"];
        i = V.length;

        while (i--) {
            try { 
                xhr = new ActiveXObject(V[i]);
                break; 
            } catch (ignore) {} 
        } 
    }

    xhr.onreadystatechange = ensureReadiness;
    xhr.open(method, u, true);
    if(data) {
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     }
    xhr.send('data'); 
}

在我的 validateform 函数中调用 ajax（也许我需要在这里做一些事情来获取表单输入并以某种方式绑定它）

function validateform(form){
 var name = form.name.value; //it gives the value of the typed input in form field.
 var cb = function (xhr) {};
 load("/store-locator/uk/asp/sendEmail.asp","POST", cb,name);
}

Answer 1

如果您想使用 HTML 表单的表单数据发出 POST 请求，那么使用 xhr.send(''); 显然行不通，因此您更需要

function sendForm(form) {
  var req = new XMLHttpRequest();
  req.open('POST', 'sendmail.asp');
  req.onload = function() {
    // handle response here
  }
  req.send(new FormData(form));
}

Answer 2

您没有将表单值传递给 xhr.send()。

您可以使用 FormData 来完成。这里有一些关于如何使用 FormData 的有用信息：

Using FormData objects。

它适用于大多数现代浏览器，IE10+ 等。如果您需要支持旧版浏览器，请在此处获取更多信息：

Submitting forms and uploading files

编辑：要构建要通过 AJAX 发送的表单数据，您的表单值需要是 name/value 对的字符串，由 & 字符分隔，例如这个：

name=steve&email=steve@example.com

所以在你更新的更新问题中 javascript 应该更像这样（注意：未经测试）：

function validateform(form){
     var name = 'name=' + form.name.value; //it gives the value of the typed input in form field.
     var cb = function (xhr) {};
     load("/store-locator/uk/asp/sendEmail.asp","POST", cb,name);

}

这应该会为您提供名称值，您只需要扩展它以包含您的电子邮件值。您可能会发现需要对电子邮件地址进行编码，因此您可以为此使用 encodeURIComponent()。

我也不知道是不是打错了，但是你需要这样调用xhr.send()：

xhr.send(data);

目前你有：

xhr.send('data'); // single quotes need removing

EDIT2：为了完整性，正如我提到的使用 FormData（如果您不需要担心旧浏览器，这将是我的偏好）。以下是您在示例中使用 FormData 的方式：

function validateform(form){
    var formData = new FormData(form);
    var cb = function (xhr) {};
    load("/store-locator/uk/asp/sendEmail.asp","POST", cb, formData);
}

通过 ajax 调用 asp 文件时从 xsl 获取表单值

Getting form values from xsl when asp file is called via ajax

javascript

forms

xslt

ajax

asp-classic