Страница становится пустой при каждом запуске AJAX - PullRequest
Новая
       12

Страница становится пустой при каждом запуске AJAX

0 голосов
/ 27 июня 2019

Я работаю над приложением, созданным с помощью Bootstrap 4 / JQuery / AJAX на ASP.NET.Всякий раз, когда на странице запускается запрос AJAX (при нажатии кнопки), страница становится белой / пустой на время выполнения запроса , и как только запрос AJAX завершен, страница возвращается.Данные результатов также успешно заполняются.

Я проверил на стеке поток для любых решений.Большинство предложений касалось изменения любых кнопок на странице HTML на type = "button".Я также попытался установить event.preventDefault() и event.stopPropagation() при нажатии кнопки.

Я использую кнопки начальной загрузки в div.На странице есть HTML-форма, но я не отправляю ее.

Ниже приведен пример кода для справки.

JS 

 $('#btnAuthenticate').on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

       var url = resolveUrl('~/req/getData');
        $.ajax({
            type: "POST",
            url: url,
            data: {u:"",p:""},
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                //gets the data here and populates it on a dropdown
                //data is received successfully
            },
            error: function (response) {
                alert("Error occurred while processing the request : " +response.d);
            }
        });
    });

HTML 

<div class="my-4">
        <form>
            <div class="form-row mx-1">
                <div class="col-lg-12">
                    <div class="card mb-4">
                      <div class="card-header h3 font-weight-lighter">
                        <div class="float-left"><span class="h3 mr-2" data-feather="file"></span>Select</div>
                        <div class="float-right">
                            <button type="button" class="btn btn-sm btn-secondary float-right mr-1" data-toggle="modal" data-target="#exampleModalCenter" id="btnDownloadInit">
                              <span data-feather="download"></span>&nbsp;Download
                            </button>
                        </div>

                     </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Download</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div class="border border-gray rounded p-4">
                    <div class="row">
                        <div class="col-lg-12">
                            <label for="txturl">URL</label>
                            <input type="text" class="form-control" id="txturl" placeholder="URL here.." required/>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-6">
                            <label for="txtUsername">Username</label>
                            <input type="text" class="form-control" id="txtUsername" placeholder="name" required/>
                        </div>
                        <div class="col-lg-6">
                            <label for="txtPassword">Password</label>
                            <input type="password" class="form-control" id="txtPassword" placeholder="" required/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 mt-4 mb-2">
                            <div class="btn btn-primary rounded" id="btnAuthenticate"><span class="mr-1" data-feather="lock"></span>Authenticate</div>
                        </div>
                    </div>
                </div>
              </div>
              <div class="modal-footer">

              </div>
            </div>
          </div>
        </div>           
    </div>

CS 

[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getData()
{
    try
    {
        ConnectionDetails data = getConnectionDetails();
        return JsonConvert.SerializeObject(data);

    }
    catch (Exception ex)
    {
        Logger.log.Error(ex);
        HttpContext.Current.Response.StatusCode = 400;
        throw new Exception("Error occurred");
    }
}
...