php ajax表单提交..没有任何反应

I have a PHP Ajax form that I'm trying to submit a Zendesk API call. Whenever I use the ajax part, in order to keep the user on the same page, it doesn't work. When I remove the <script> part, it works fine, but obviously redirects to contact.php from contact.html so I'm thinking the problem is in the Ajax part, not in the PHP part.

我有一个PHP Ajax表单,我正在尝试提交Zendesk API调用。每当我使用ajax部分时,为了使用户保持在同一页面上,它都不起作用。当我删除

Here is my HTML form:

这是我的HTML表单:

<html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        </head>
        <body>
        <div class="box_form">

        <form id="zFormer" method="POST" action="contact.php" name="former">
        <p>
        Your Name:<input type="text" value="James Duh" name="z_name">
        </p>
        <p>
        Your Email Address: <input type="text" value="duh@domain.com" name="z_requester">
        </p>
        <p>
        Subject: <input type="text" value="My Subject Here" name="z_subject">
        </p>
        <p>
        Description: <textarea name="z_description">My Description Here</textarea>
        </p>
        <p>
        <input type="submit" value="submit" id="submitter" name="submit">
        </p>
        </form>
        </div>

        <div class="success-message-subscribe"></div>
        <div class="error-message-subscribe"></div>


<script>
jQuery(document).ready(function() {

$('.success-message-subscribe').hide();
$('.error-message-subscribe').hide();

    $('.box_form form').submit(function() {
        var postdata = $('.box_form form').serialize();
        $.ajax({
            type: 'POST',
            url: 'contact.php',
            data: postdata,
            dataType: 'json',
            success: function(json) {
                if(json.valid == 1) {
                    $('.box_form').hide();

                    $('.error-message-subscribe').hide();
                    $('.success-message-subscribe').hide();
                    $('.subscribe form').hide();
                    $('.success-message-subscribe').html(json.message);
                    $('.success-message-subscribe').fadeIn();
                }
            }
        });
        return false;
    });

});
</script>

        </body>
        </html>

And the PHP Part:

和PHP部分:

You can probably ignore most of this since it works when I don't use the Ajax. Only the last few lines gives the response $array['valid'] = 1; which should then be catched by if(json.valid == 1) above.

您可以忽略大部分内容,因为它在我不使用Ajax时起作用。只有最后几行给出了响应$ array ['valid'] = 1;然后应该由上面的if(json.valid == 1)捕获。

<?php
        ( REMOVED API CALL CODE FROM ABOVE HERE )

        if (isset($_POST['submit'])) { 

        foreach($_POST as $key => $value){
            if(preg_match('/^z_/i',$key)){
                $arr[strip_tags($key)] = strip_tags($value);
            }
        }
        $create = json_encode(array('ticket' => array(

        'subject' => $arr['z_subject'], 
        'comment' => array( "body"=> $arr['z_description']), 
        'requester' => array('name' => $arr['z_name'], 
        'email' => $arr['z_requester'])

        )));

        $return = curlWrap("/tickets.json", $create, "POST");


        $array = array();
        $array['valid'] = 1;
        $array['message'] = 'Thank you!';
        echo json_encode($array);


  ?>

Any ideas why this isn't working?

任何想法为什么这不起作用?

2 个解决方案

#1

I expect your use of contact.php as a relative URL isn't resolving properly. Check your JavaScript console and you should see an error that shows the post failing. Change contact.php to www.your_domain.com/contact.php and it should work fine

我希望您使用contact.php作为相对URL无法正确解析。检查您的JavaScript控制台,您应该看到一个错误,显示帖子失败。将contact.php更改为www.your_domain.com/contact.php,它应该可以正常工作

#2

Replace jQuery(document).ready(function() { by

替换jQuery(document).ready(function(){by

$(document).ready(function() {

Secondly from Jquery documentation:

其次来自Jquery文档:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

注意:只有“成功控件”序列化为字符串。没有提交按钮值被序列化,因为表单未使用按钮提交。要使表单元素的值包含在序列化字符串中,该元素必须具有name属性。复选框和单选按钮(“radio”或“checkbox”类型的输入)中的值仅在选中时才包括在内。文件选择元素中的数据未序列化。

Therefore submit button won't serialize through jQuery.serialize() function.

因此,提交按钮不会通过jQuery.serialize()函数序列化。

A solution below:

以下解决方案:

<script>
$(document).ready(function() {

$('.success-message-subscribe').hide();
$('.error-message-subscribe').hide();

    $('#submitter').click(function(e) {
        e.preventDefault();
        $myform = $(this).parent('form');
        $btnid = $(this).attr('name');
        $btnval = $(this).attr('value');
        var postdata = $myform.serialize();
        $.ajax({
            type: 'POST',
            url: 'contact.php',
            data: { "btnid" : $btnid, "btnval": $btnval, "form-data": $form.serialize() },
            dataType: 'json',
            success: function(json) {
                if(json.valid == 1) {
                    $('.box_form').hide();

                    $('.error-message-subscribe').hide();
                    $('.success-message-subscribe').hide();
                    $('.subscribe form').hide();
                    $('.success-message-subscribe').html(json.message);
                    $('.success-message-subscribe').fadeIn();
                }
            }
        });
        return false;
    });

});
</script>

#1

#2