无法通过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 AppHttpControllers;
use Exception;
use IlluminateHttpRequest;
use AppHttpRequests;
use AppHttpControllersController;
use Appinfo;
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>