Переадресация AJAX после успешного HTTP Post

Question

Я использую AJAX для публикации данных и хочу перенаправить пользователей на https://example.com/dashboard/ExportExcelSales после успеха.

Я пытался использовать location.href, но он не работал должным образом.

Ниже приведен фрагмент моего кода, выполняющий HTTP POST с использованием AJAX;

$("#analysis").click(function() {
    $.ajax({
        type: "POST",
        url: "dashboard/ExportExcelSales",
        data: {
            dateStart: $('#dateStartTanggalbarang').val(),
            dateEnd: $('#dateEndTanggalbarang').val(),
            area: $('#areaFill').val(),
            booth: $('#boothFill').val(),
            acam: $('#acamFill').val(),
        },
        dataType: "JSON",
        async: false,
        success: function (response) {
            location.href = "dashboard/ExportExcelSales";
        }
    });
});

Это мой контроллер;

public function ExportExcelSales() {
    $dateawal = $this->input->post("dateStart");
    $dateakhir = $this->input->post("dateEnd");
    $area = $this->input->post('area');
    $booth = $this->input->post('booth');
    $acam = $this->input->post('acam');

    $data = array(
        'data' => $this->M_Sales->tableExport(
            $dateawal,
            $dateakhir,
            $area,
            $booth,
            $acam
        ),
        'dateakhir' => $dateakhir,
        'dateawal' => $dateawal,
        'area' => $this->M_Sales->areaSelect($area),
        'booth' => $this->M_Sales->boothSelect($booth),
        'acam' => $this->M_Sales->acamSelect($acam),
    );

    $path = "";
    $data = array(
        "page" => $this->load("Export Data Sales", $path),
        "content" =>$this->load->view('layouts/exportExcelSales', $data, true)
    );
    $this->load->view('layouts/exportExcelSales', $data);
}

Что я делаю неправильно и как я могу это исправить

Answer 1

Вы используете post в своем бэкэнде, и вы просто перенаправляете в веб-интерфейсе.

Ваши варианты:

Вариант 1: использование GET

На вашем js создайте URL при успехе. Как:

$("#analysis").click(function() {
  $.ajax({
    ....
    success: function(response) {
      var dateStart = $('#dateStart').val();   //Getting values from inputs.
      var dateEnd = $('#dateEnd').val();       //Update the input ids accordingly 
      var area = $('#area').val();
      var booth = $('#booth').val();
      var acam = $('#acam').val();
      location.href = "dashboard/ExportExcelSales?dateStart=" + dateStart + "&dateEnd=" + dateEnd + "&area=" + area + "&booth=" + booth + "&acam=" + acam;
    }
  });
});

На вашем бэкэнде вы можете использовать $this->input->get, чтобы получить значение

public function ExportExcelSales(){
    $dateawal = $this->input->get("dateStart");
    $dateakhir = $this->input->get("dateEnd");
    $area = $this->input->get('area');
    $booth = $this->input->get('booth');
    $acam = $this->input->get('acam');
    ....
}

Вариант 2: Использование POST

Вы можете поместить свои данные в форму, такую ​​как:

<form id="exportExcelSales" action="layouts/exportExcelSales" method="post">
    <input type="text" name="dateStart"><br>
    <input type="text" name="dateEnd"><br>
    <input type="text" name="area"><br>
    <input type="text" name="booth"><br>
    <input type="text" name="acam"><br>
</form>

На вашем js вы можете отправить форму, позвонив по submit() методу:

$("#analysis").click(function() {
  $.ajax({
    ....
    success: function(response) {
      $("#exportExcelSales").submit(); //SUbmit the exportExcelSales form.
    }
  });
});

Не нужно менять layouts/exportExcelSales код.