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

我试图让我的表单通过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);
            }
        });

    });

});

$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
$（'.output_message'）.html（“加载…”）；
e、 预防默认值（）；
$.ajax(
{
键入：“post”，
url:“//leafy.pw/assets/process.php”，
数据：$（'form'）。序列化（），
成功：函数（）
{
$（“.output_message”）.html（数据）；
}
});
});
});

这是我的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");
}

if（isset（$\u POST[“long\u url”]））
{
$long\u url=mysqli\u escape\u字符串（$mysqli，$\u POST[“long\u url]”）；
如果（$_POST[“别名”！=“”）
$alias=mysqli\u escape\u字符串（$mysqli，$\u POST[“alias”]）；
其他的
$alias=substr（md5（time（）.$long_url），0,4）；
如果（$mysqli->connect\u error）
{
//仅调试
//die（'Error:（'.$mysqli->connect\u errno.'）。$mysqli->connect\u Error）；
回声（'
错误：无法连接到数据库
'
);
}
如果（！@file\u获取内容（$long\u url））
{
回声（'
错误：无法连接到URL
'
);
}
$stored_alias=$mysqli->query（“从leafys中选择short，其中BINARY short='$alias'）->fetch_object（）->short；
如果（$U别名）
{
回声（'
错误：“.$stored_alias.”存在
'
);
}
if（strpos（$long_url，'leafy.tk'）！==false）
{
回声（'
错误：无法使用主机URL Leafy.pw
'
);
}
$query=“插入到leafys（长url，短url）值（？，）”；
$statement=$mysqli->prepare（$query）；
$statement->bind_参数（'ss'，$long_url，$alias）；
如果（$statement->execute（））
{
//在此处显示短叶信息。
回声（'

叶状网址创建！
复制到剪贴板
复制到剪贴板


二维码
' );
}
}
其他的
{
回声（“错误”）；
}

这是我的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>

缩短
显示选项


Https://leafy.pw/
公共（默认）
私人（未列出）


根据您在上面的评论中报告的错误，我冒昧地猜测您使用的是不包含ajax函数的jQuery精简版本。您应该使用完整版本的jQuery，它将包含您在代码中使用的ajax函数。
您在控制台中看到任何错误吗？我只能看到页面源代码在浏览器中，不确定如何查看控制台form.js:18未捕获类型错误：$.ajax不是HTMLFormElement的函数。（form.js:18）在HTMLFormElement.dispatch（jquery-3.2.1.slim.min.js:3）在HTMLFormElement.q.handle（jquery-3.2.1.slim.min.js:3）未捕获类型错误：无法在recapchacallback设置null的属性“disabled”（form.js:3）在zs.n.Ld（recaptcha_uuuen.js:409）在gp.（recaptcha_uuen.js:242）在gp.（recaptcha_uen.js:242）在ff（recaptcha_uen.js:64）在bf（recaptcha_uen.js:64）在b（recaptcha_uen.js:61）我包含了两个jquery脚本，在删除了纤细的一个之后，它现在可以工作了。嘿，很高兴找到Billy和guess。问得好。