php - 我的 AJAX 表单不会提交并返回响应

Question

我试图让我的表单通过 AJAX 将数据提交给 PHP。 它显示加载消息但在 $.ajax(

我做错了什么？

这是我的 form.js:

$(function () {

    $('form').on('submit', function (e) {

        $('.output_message').html("<div class='card'><div class='card-body'><i class='fas fa-spinner fa-spin'></i> Loading...</div></div>"); 
        e.preventDefault();

        $.ajax(
        {
            type: 'post',
            url: '//leafy.pw/assets/process.php',
            data: $('form').serialize(),
            success: function () 
            {
                $(".output_message").html(data);
            }
        });

    });

});

这是我的 process.php

if ( isset( $_POST[ "long_url" ] ) ) 
{

    $long_url = mysqli_escape_string( $mysqli, $_POST[ "long_url" ] );
    if( $_POST[ "alias" ] != "" )
        $alias = mysqli_escape_string( $mysqli, $_POST[ "alias" ] );
    else
        $alias = substr( md5( time( ). $long_url ), 0, 4 );

    if( $mysqli->connect_error )
    {
        // Debugging Only
        // die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);

        echo( ' <div class="alert alert-danger" role="alert">
                    Error: Couldn\'t Connect To Database
                </div>'
            );
    }

    if( ! @file_get_contents( $long_url ) )
    {
        echo( ' <div class="alert alert-danger" role="alert">
                    Error: Couldn\'t Connect To URL
                </div>'
            );
    }

    $stored_alias = $mysqli->query("SELECT short FROM leafys WHERE BINARY short = '$alias'")->fetch_object()->short;

    if( $stored_alias )
    {
        echo( ' <div class="alert alert-danger" role="alert">
                    Error: '. $stored_alias .' Exists
                </div>'
            );
    }

    if( strpos( $long_url, 'leafy.tk' ) !== false )
    {
        echo( ' <div class="alert alert-danger" role="alert">
                    Error: Cannot Use Host URL Leafy.pw
                </div>'
            );
    }

    $query = "INSERT INTO leafys ( long_url, short ) VALUES( ?, ? )";
    $statement = $mysqli->prepare($query);

    $statement->bind_param( 'ss', $long_url, $alias );

    if( $statement->execute( ) )
    {
        // Display Short Leaf Information Here.
        echo( '
            <hr />
            <h2> Leafy URL Created! </h2>
            <div id="form" data-tip="Your Leafy URL">
                <input style="width: 100%; max-width: 215px;" type="text" value="https://leafy.pw/' .$alias. '" id="short" readonly />
                <div class="tooltip">
                    <button onclick="myFunction()" onmouseout="outFunc()">
                        <span class="tooltiptext" id="myTooltipShort">Copy To Clipboard</span>
                        <i style="color:#00FF00;" class="far fa-copy fa-lg"></i>
                    </button>
                </div>
            </div>
            <div id="form" data-tip="Your Leafy Stats URL">
                <input style="width: 100%; max-width: 215px;" type="text" value="https://leafy.pw/' .$alias. '+" id="stats" readonly />
                <div class="tooltip">
                    <button onclick="myFunction1()" onmouseout="outFunc1()">
                        <span class="tooltiptext" id="myTooltipStats">Copy To Clipboard</span>
                        <i style="color:#00FF00;" class="far fa-copy fa-lg"></i>
                    </button>
                </div>
            </div>
            <br />
            <h2> QR Code </h2>
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://leafy.pw/' .$alias. '"> ' );
    }

}
else
{
    echo("Error");
}

这是我的表单 html:

<form>

    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
        </div>
        <input type="url" class="form-control" id="long_url" name="long_url" placeholder="Https://..." aria-label="Https://..." required autocomplete="off" aria-describedby="basic-addon1">
        <div class="input-group-append">
            <button class="btn btn-outline-success" type="submit" id="submit" name="submit" >Shorten</button>
        </div>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1" data-toggle="collapse" data-target="#collapseOptions">
        <label class="custom-control-label" for="customCheck1">Show Options</label>
    </div>
    <br />
    <div class="collapse" id="collapseOptions">
        <div class="card card-body">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">Https://leafy.pw/</span>
                </div>
                <input type="text" class="form-control" id="alias" name="alias" aria-describedby="basic-addon3" placeholder="">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="privacy"><i class="fas fa-user-secret"></i></label>
                </div>
                <select class="custom-select" name="privacy" id="privacy">
                    <option value="public" selected>Public ( Default )</option>
                    <option value="private">Private ( Not Listed )</option>
                </select>
            </div>
        </div>
        <br />
    </div>

    <div class="g-recaptcha" data-sitekey="6LfwAmIUAAAAACRaIsSBgxq5qtY0Gov3zf0D0lst" data-size="<?php IsMobile( ); ?>" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpired"></div>

</form>

我不知道这是怎么回事...

它的意思是抓取 url 和别名(可选)并将数据添加到数据库中，然后在表单下返回缩短的 url。我已经让它在我的旧网站上工作，但似乎无法在我的新网站上使用我的新表单布局。

Answer 1

基于 this blog article以及您在上面的评论中报告的错误，我将冒险猜测您正在使用不包含 ajax 函数的 jQuery slim 构建。您应该使用完整版本的 jQuery，其中包括您在代码中使用的 ajax 函数。