发送跨域HTTP发布HTML表单(Send cross domain HTTP Post with

2019-10-18 01:34发布

我有这样的HTML表单,我需要提交之前,做一些处理:

<form action="http://appid.appspot.com/api/foo" id="contact-form" method="post"
name="contact-form">
    <fieldset>
        <label><input name="email" onblur=
        "if(this.value=='') this.value='Email'" onfocus=
        "if(this.value =='Email' ) this.value=''" value="Email"></label>
        <label><input name="subject" onblur=
        "if(this.value=='') this.value='Subject'" onfocus=
        "if(this.value =='Subject' ) this.value=''" value="Subject"></label> 
        <textarea name="message" onblur=
        "if(this.value=='') this.value='Message'" onfocus=
        "if(this.value =='Message' ) this.value=''">
Message
</textarea>

        <div class="buttons">
            <a href="#" onclick=
            "document.getElementById('contact-form').reset()">Clear</a>
            <a href="#" onclick=
            "document.getElementById('contact-form').submit()">Send</a>
        </div>
    </fieldset>
</form>

基本上,我需要做的是:

  • 当点击提交按钮,弹出窗口会出现,表明消息已经提交(通过检查服务器响应)反正,

  • 我需要复制的具体形式输入的值,比如输入元素的值。 然后前插,说,电子邮件实际的消息,这样的形式“消息”将是例如"Email: x@dot.com Message: Hello world" < -这将是与输入元素的值只是发送表单字段的API之前NAME =“消息”

更新:

我的意思,我的问题是,我想这个基本的HTML表单POST基础迁移到一个Ajax调用,如果这样做会更好,这样我就可以轻松实现我上面提出的目标。

Answer 1:

你想使用窗体的onsubmit

我改变了你的HTML(特别是内联JavaScript)位(为清楚起见):

<form action="http://appid.appspot.com/api/foo" id="contact-form" method="post"
name="contact-form" onsubmit="return doStuff() ? true:false;">
    <fieldset>
        <input name="email" value="Email"
             onblur="if(this.value===''){this.value=this.defaultValue}" 
            onfocus="if(this.value===this.defaultValue){this.value=''}" > <br>
        <input name="subject" value="Subject"
             onblur="if(this.value===''){this.value=this.defaultValue}" 
            onfocus="if(this.value===this.defaultValue){this.value=''}" > <br>
        <textarea name="message" 
                onblur="if(this.value===''){this.value=this.defaultValue}" 
               onfocus="if(this.value===this.defaultValue){this.value=''}"
                      >Message</textarea>
        <div class="buttons">
            <a href="#" onclick=
            "document.getElementById('contact-form').reset()">Clear</a>
            <a href="#" onclick=
            "if(doStuff()){document.getElementById('contact-form').submit();}">Send</a>
        </div>
    </fieldset>
</form>

正如你可以看到输入元素的自动填充/自动清除现在那种重复,所以你可以在一个单独的通用功能的因素吧。

这里是运行形式实际上之前提交的JavaScript函数:

function doStuff(){
    var eml=document.getElementsByName('email')[0].value;
        msg=document.getElementsByName('message')[0];
    msg.value = 'Email: ' + eml + ' Message: ' + msg.value;
    alert ('message has been submitted');
    return true;
}

工作的jsfiddle这里

如果其他的域使用会话cookie和/或检查文件参照这样做跨域可能变得棘手。

更新:我看到你更新你的问题,现在要检查并显示在您的邮件服务器响应?



文章来源: Send cross domain HTTP Post with HTML forms