使用 Sweetalert 的搜索页面答案

【问题标题】：Search page using Sweetalert使用 Sweetalert 的搜索页面
【发布时间】：2020-08-11 10:48:35
【问题描述】：

我正在尝试创建一个名为“用户列表”的页面，其中我有一个带有输入文本表单的 sweetalert，用户在 sweetalert 中输入名称，然后使用 POST 方法（如表单）重定向到 mywebsite.com/search并显示具有该名称的结果。 Sweetalert 被放在主页上。

<script>
    function searchp()
{
    Swal({
        title: 'Search',
        input: 'text',
        inputPlaceholder: 'enter_name',
        inputAttributes: {
          autocapitalize: 'off'
        },
        showCancelButton: true,
        confirmButtonText: 'Search',
        confirmButtonColor: '#ffffff',
        cancelButtonColor: '#d33'
    }).then(result => {
        if (result.value) {
            $.ajax({
                  type: "POST",
                  url: '<?php echo base_url("search"); ?>',
                  data: {
                       //here 1
                  },
                  success: function(data)
                  {
                    //here 2
                  }
            });
          } else {
            Swal(
                'Ops!',
                'You canceled.',
                'error'
            )
          }
    })
}
</script>

如您所见，我不知道如何在 '' 上应用 POST 方法。我使用 Codeigniter 3 作为 php 框架。等于 mywebsite.com/search。

我希望用户在输入表单中输入姓名并按下提交以在搜索页面上应用发布方法并在那里显示结果。搜索页面的后端已经建立，并且正在使用普通标签。

【问题讨论】：

标签： php forms codeigniter post

【解决方案1】：

嘿，如果您想重定向页面，那么您根本不需要 ajax 请求。首先获取输入值，然后将其用作所需 URL 中的参数。我已经创建了一个演示，看看这是否适合你。 ↓↓

function searchp() {
  Swal.fire({
    title: 'Search',
    input: 'text',
    inputPlaceholder: 'Enter Name',
    inputAttributes: {
      autocapitalize: 'off'
    },
    showCancelButton: true,
    confirmButtonText: 'Search',
    //confirmButtonColor: '#eee',
    cancelButtonColor: '#d33',
    preConfirm: (data) => {
      if (data != "") {
        // window.location = '<?php echo base_url('search')?>' + data;
        // or(whichever works for you)
        // window.location = '<?php echo base_url('search')?>' + '/' + data;
        console.log(`Your name: ${data}`)
      } else {
        Swal.showValidationMessage(`Please enter name`)
      }
    },
  })
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.10.12/dist/sweetalert2.all.min.js"></script>
<button onclick="searchp()" >Fire Sweet Alert</button>

【讨论】：