高级jQuery表单验证 - 如何将GET更改为POST?

时间:2011-07-29 17:59:02

标签: php jquery forms post get

我是jQuery和JavaScript的新手,我一直在尝试实现一个调用PHP文件发送实际电子邮件的jQuery联系表单。

这是在jQuery验证通过后调用PHP文件的jQuery部分:

$(this).click(function() { 

    var result = $.formValidator(options);

    if (result && jQuery.isFunction(options.onSuccess)) {
        options.onSuccess();

        // Start Processor
        if($(this).data('formstatus') !== 'submitting'){

            // Setup variables
                // Form Variables
                    var name = $(".form input#getstarted-name").val();
                    var number = $(".form input#getstarted-phone1").val() + ' ' + $(".form input#getstarted-phone2").val();
                    var company = $(".form input#getstarted-company").val();
                    var email = $(".form input#getstarted-email").val();
                    var message = $(".form textarea#getstarted-message").val();
                    var from_url = $(".form input#getstarted-from_url").val();

                // Consolidate Variables
                var dataString = 'name=' + name + '&number=' + number + '&company=' + company + '&email=' + email + 
                             '&message=' + message + '&from_url=' + from_url;
            var form = $(this),
                //formData = email.serialize(),
                formData = dataString, 
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#startproject-response');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .removeClass('response-error')
                       .removeClass('response-success')
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            $.ajax({
                url: "/layout/js/jquery/forms/form_db_process.php",
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .removeClass('response-error')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;

        // End Processor

    }
});

这是PHP文件“form_db_process.php”:

$name = mysql_real_escape_string($_GET['name']);
$number = mysql_real_escape_string($_GET['number']);
$company = mysql_real_escape_string($_GET['company']);
$email = mysql_real_escape_string($_GET['email']);
$message = mysql_real_escape_string($_GET['message']);
$ip = $_SERVER['REMOTE_ADDR'];
$timestamp = date("y/m/d : H:i:s", time());
$from_url = mysql_real_escape_string($_GET['from_url']);

// send email etc...

我已经完成了这一切,但我想知道如何将GET更改为POST?我知道如何使用常规的HTML + PHP来做到这一点,但jQuery我不知所措......

我看了看这里: http://api.jquery.com/jQuery.post/

但无法提出任何可行的事情/不确定如何使用它。 任何帮助将不胜感激!!

//编辑:我已添加下面的HTML部分(表单):

<form id="startproject-form" class="form" method="post" action="">

<!-- ... form inputs here ... -->

</form>

3 个答案:

答案 0 :(得分:3)

在jQuery中:

$.ajax({
  type: 'POST',

您的代码确实:

 $.ajax({
                url: "/layout/js/jquery/forms/form_db_process.php",
                type: formMethod,

并且之前设置了formMethod:

var form = $(this),
                //formData = email.serialize(),
                formData = dataString, 
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 

覆盖它,或者实际将表单的METHOD属性更改为POST。

答案 1 :(得分:1)

$.ajax可以执行GET和POST。这是您传递的表单类型,它是从表单的method属性中检索的,因此您可以更改它。

您还可以使用在屏幕后面调用$.get的{​​{1}}或$.post缩写。

答案 2 :(得分:0)

首先确保formMethod是'POST'并且我将以json格式而不是查询字符串传递数据。在这种情况下,您需要相应地指定数据类型和contentType。