Не удается передать данные в Laravel API через AJAX

#javascript #jquery #laravel-5 #ajaxform

#javascript #jquery #laravel-5 #ajaxform

Вопрос:

Я пытаюсь передать значение в свой серверный интерфейс (API, разработанный с использованием laravel 5.7), но я не могу передать значение. Если я использую button для отправки, то значение не будет передано, если я использую «ввод» вместо «кнопки», то смогу передать значение. и я не получаю значение ответа. Приветствуется любая помощь по этой проблеме

мой 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);
    }
}
  

Комментарии:

1. проверьте консоль и InspectElement > Networktab, отправляется запрос ajax на сервер или нет?

2. Кроме того, троичное выражение, которое вы используете для проверки, излишне запутано и его трудно прочитать. Также обратите внимание, что $('#errorID') условие всегда будет равно true , что повлияет на логический поток. Если вы пытаетесь проверить, существует ли элемент, используйте $('#errorID').length != 0

Ответ №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>
  

Комментарии:

1. Просто хочу добавить идентификатор attr в форму и присвоить это значение идентификатора форме в кнопке