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

javascript中的Ajax （javascript中的ajax是完美的，无需调试将其发布以供参考）

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 （也许我需要在这里做一些事情来获取表单输入并将其绑定到somwhow）

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=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获取表单值

2 个答案: