无法通过 AJAX 将数据传递给 Laravel API

Question

我正在尝试将值传递给我的后端（使用 laravel 5.7 开发的 API），但我无法传递该值。如果我使用按钮提交，那么值将不会被传递，如果我使用“输入”而不是“按钮”，那么能够传递值。而且我没有得到响应值。对此问题的任何帮助表示赞赏

我的 HTML 代码

<form>

     <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
         <input type="text" class="form__input" id="uname" name="username" required
                                onkeypress="return isAlphabet(event)" maxlength="30">
         <label class="form__label" for="uname">
             <span class="form__label-content">What we calls you?</span>
         </label>
     </div>
     <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
         <input type="tel" class="form__input" id="mobile" name="phonenumber" required
                                onkeypress="return isNumberKey(event);" maxlength="10">
         <div id="error"></div>

         <label class="form__label" for="uno">
              <span class="form__label-content">What's your number?</span>
         </label>

     </div>
     <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
         <input type="email" class="form__input" id="email" name="email"
                            pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

         <label class="form__label" for="uemail">
             <span class="form__label-content">What's your Email?</span>
         </label>

     </div> 
     <button type="submit" class="col-md btn btn-default bg-orange btn-lg wow fadeInUp form_input">Get
                            Notified</button>
 </form>

我的 Jquery 代码

$("form").submit(function (event) {
    event.preventDefault();
    $('#mobile').val().length != 10 ? ($('#errorID') ? $("#mobile").after('<div id="errorID" class="alert alert-danger">Please enter Valid mobile</div>') : null) : ($("div").remove("#errorID"), mob = ($("#mobile").val()));
    $.ajax({
        type: "POST", url: "localhost:8000/api/astroinfo", data: { username: $("#uname").val(), phonenumber: mob, email: $("#email").val() },
        success: function (data) {
            $("div").remove(".modal-body");
            if (data.status == '0') {
                $(".modal-header").after('<div id="errorID" class="alert alert-success">Successfully Submitted<br>We will revote you soon</div><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">Close</button></div>');
            } else if (data.status == '1') {
                $("modal-header").after('<div id="errorID" class="alert alert-danger">Something Went Wrong</div><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">Close</button></div>');
            }
        },
        error: function (data) {
            $("div").remove(".modal-body");
            $(".modal-header").after('<div id="errorID" class="alert alert-danger">Sending Unsuccesful</div><div class="modal-footer"><button type="button" class="btn btn-danger" data-dismiss="modal">Close</button></div>');
        }
    });

});

Laravel 代码

<?php

namespace App\Http\Controllers;

use Exception;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\info;
use Mail;

class AstrolgerinfoCtrl extends Controller
{
    public function info(Request $request)
    {


        $insert=new info([
          "name"=> $request->username,
          "number"=> $request->phonenumber,
          "email"=> $request->email
        ]);
        $insert->save();
        return response()->json(['status'=>0],200);
    }
}

Answer 1

      <form id="form1">
    <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
     <input type="text" class="form__input" id="uname" name="username" required
                            onkeypress="return isAlphabet(event)" maxlength="30">
     <label class="form__label" for="uname">
         <span class="form__label-content">What we calls you?</span>
     </label>
 </div>
 <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
     <input type="tel" class="form__input" id="mobile" name="phonenumber" required
                            onkeypress="return isNumberKey(event);" maxlength="10">
     <div id="error"></div>

     <label class="form__label" for="uno">
          <span class="form__label-content">What's your number?</span>
     </label>

 </div>
 <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s" id="getvalue">
     <input type="email" class="form__input" id="email" name="email"
                        pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

     <label class="form__label" for="uemail">
         <span class="form__label-content">What's your Email?</span>
     </label>

 </div> 
 <button type="submit" class="col-md btn btn-default bg-orange btn-lg wow fadeInUp form_input">Get
                        Notified</button>
                             </form>