使用Sweetalert搜索页面

Question

我正在尝试创建一个名为"用户列表"的页面，在其中我有一个带有输入文本表单的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.

我想在用户在输入表单中输入姓名并按下提交后，在搜索页面上应用张贴方法并显示结果。搜索页面的后端已经制作完成，并且正在使用普通标记。

Answer 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>