Ajax 窗体转到另一个页面，而不是停留在同一页面上

我有一个弹出的ajax表单，它不是发送数据并保持在同一页面上，而是发送数据，但从我的表单将我带到文件发送.php。为什么？我在另一个网站上正确实现了几乎相同的表单。我不知道我在这里做错了什么...

形式：

<form id="form" action="send.php"  name="form" method="post" >
    <input type="text"  id="name" name="name" value="" /><br />
    <input type="text"  id="email" name="email" value=""  /><br />
    <textarea name="message" cols="4" rows="4"  id="message" ></textarea><br />
    <input type="submit" value="" id="submit" title="Send!"/>
</form>

阿贾克斯：

<script type="text/javascript">
$(document).ready(function () {
    $('#form').ajaxForm({
        beforeSubmit: validate
    });
    function validate(formData, jqForm, options) {
        var name = $('input[name=name]').fieldValue();
        var email = $('input[name=email]').fieldValue();
        var message = $('textarea[name=message]').fieldValue();
        if (!name[0]) {
            alert('Please enter a value for name');
            return false;
        }
        if (!email[0]) {
            alert('Please enter a value for email');
            return false;
        }
        if (!message[0]) {
            alert('Please enter a value for message');
            return false;
        }
        else {
        $("#prima_form").fadeOut(1000, function () {
            $(this).html("<img src='images/de_multumire.png'/>").fadeIn(2000);
        });
        var message = $('textarea[name=message]').val('');
        var name = $('input[name=name]').val('');
        var email = $('input[name=email]').val('');
} 
}
});
</script>

发送.php：

<?php
        if($_POST){
                $email = $_POST['email'];
                $name = $_POST ['name'];
                $message = $_POST ['message'];
                // response hash
                $ajaxresponse = array('type'=>'', 'message'=>'');
                try {
                        // do some sort of data validations, very simple example below
                        $all_fields = array('name', 'email', 'message');
                        foreach($all_fields as $field){
                                if(empty($_POST[$field])){
                                        throw new Exception('Required field "'.ucfirst($field).'" missing input.');
                                }
                        }
                        // ok, if field validations are ok
                        // now Send Email, ect.
                        // let's assume everything is ok, setup successful response
                        $subject = "New Contact";
                        //get todays date
                        $todayis = date("l, F j, Y, g:i a") ;
                        $message = " $todayis n
                        Attention: nn
                        Please see the message below: nn
                        Email Address: $email nn
                        Message: $message nn
                        ";
                        $from = "From: $emailrn";

                        //put your email address here
                        mail("contact@xxx.ro", $subject, $message, $from);
                        //prep json response
                        $ajaxresponse['type'] = 'success';
                        $ajaxresponse['message'] = 'Thank You! Will be in touch soon';  
                } catch(Exception $e){
                        $ajaxresponse['type'] = 'error';
                        $ajaxresponse['message'] = $e->getMessage();
                }
                // now we are ready to turn this hash into JSON
                print json_encode($ajaxresponse);
                exit;
        }
?>

我的JS控制台给出了这个：

[17:38:03.840] [cycle] terminating; zero elements found by selector @ http://sociallab.ro/js/jquery_003.js:10
--
[17:38:16.012] POST http://sociallab.ro/send.php [HTTP/1.1 200 OK 218ms]
[17:38:16.204] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol. @ http://sociallab.ro/send.php

谢谢！

在纯 Javascript 中，你需要做这样的事情：

function sendWithAjax() {
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "send.php", true);

然后从输入元素中读取值：

    var email = document.getElementById('email').value;
    var name = document.getElementById('name').value;
    var message = document.getElementById('message').value;

在调用 .send（）之前，您可以在此处验证表单

（您可能需要使用 escape（）函数转义表单元素的内容）

并将它们放入发送方法中：

    ajax.send("email="+ email +"&name="+ name +"&message="+ message);

并从表单代码中删除完整的表单标记。因此，您不需要提交按钮，因此请将其更改为简单的按钮：

<input type="text"  id="name" name="name" value="" /><br />
<input type="text"  id="email" name="email" value=""  /><br />
<textarea name="message" cols="4" rows="4"  id="message" ></textarea><br />
<input type="submit" value="" id="submit" title="Send!" onclick="javascript:sendWithAjax()"/>

要获取 ajax 响应，请使用：

    var response = ajax.responseText;
}

尝试添加以下内容：

$('#submit').click(function(){ return false; /* stop html form from submitting*/ })

我相信正在发生的事情是jquery通过ajax发送表单数据，但是您并没有像往常一样阻止默认的"提交"按钮提交html表单。添加上面的代码应该停止提交按钮的默认操作（提交要发送的表单.php），从而使您留在当前页面上。

像这样：

   $(document).ready(function(event){
        event.preventDefault();
        $('#FORMID').ajaxForm({
            type: 'POST',
            dataType: 'json',
            beforeSubmit: function(){
            },
            success: function(resp){
            },
            error: function(resp){
            }
        });
    });

希望这会有所帮助。

相关内容

最新更新

热门标签：