php ajax表单提交..什么都没有发生

Question

I have a PHP Ajax form that I'm trying to submit a Zendesk API call. 我有一个PHP Ajax表单，试图提交Zendesk API调用。 Whenever I use the ajax part, in order to keep the user on the same page, it doesn't work. 每当我使用ajax部件时，为了使用户保持在同一页面上，它将不起作用。 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. 当我删除<script>部分时，它可以正常工作，但是显然可以从contact.html重定向到contact.php ，因此我认为问题出在Ajax部分，而不是PHP部分。

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. 您可能会忽略其中大部分内容，因为当我不使用Ajax时它可以工作。 Only the last few lines gives the response $array['valid'] = 1; 仅最后几行给出响应$array['valid'] = 1; which should then be catched by if(json.valid == 1) above. 然后应该由上面的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? 任何想法为什么这不起作用？

Answer 1

Replace jQuery(document).ready(function() { by 将jQuery（document）.ready（function（）{替换为

$(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. 为了使表单元素的值包含在序列化的字符串中，该元素必须具有name属性。 Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. 仅当选中复选框和单选按钮（“ radio”或“ checkbox”类型的输入）中的值时，才包括这些值。 Data from file select elements is not serialized. 来自文件选择元素的数据未序列化。

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>

Answer 2

I expect your use of contact.php as a relative URL isn't resolving properly. 我希望您使用contact.php作为相对URL不能正确解析。 Check your JavaScript console and you should see an error that shows the post failing. 检查您的JavaScript控制台，您应该看到一个错误，表明发布失败。 Change contact.php to www.your_domain.com/contact.php and it should work fine 将contact.php更改为www.your_domain.com/contact.php ，它应该可以正常工作

php ajax表单提交..什么都没有发生

问题描述

2 个解决方案

解决方案1
1 2015-03-08 19:08:46

解决方案2
1 已采纳 2015-03-08 19:22:30

php ajax表单提交..什么都没有发生

问题描述

2 个解决方案

解决方案1 1 2015-03-08 19:08:46

解决方案2 1 已采纳 2015-03-08 19:22:30

解决方案1
1 2015-03-08 19:08:46

解决方案2
1 已采纳 2015-03-08 19:22:30