javascript - 表单自动提交无需刷新

Question

我在网上搜索了很多答案，但没有一个对我有帮助。另外我不太了解Ajax。 一切都必须发生在这一页上，无需刷新(直到提交整个表单)。

<form id="service" action="" method="post">
    <select name="service" onchange="document.getElementById('service').submit();" name="select">
        <option value="1" <?php if($_POST['service']==1){ print ' selected'; }?>>Opcja1</option>
        <option value="2" <?php if($_POST['service']==2){ print ' selected'; }?>>Opcja2</option>
    </select>
    </form>

<小时/>

if($_POST['service']==1 | empty($_POST['service']) ){
    //other forms and options
    }
elseif($_POST['service']==2){
    //smth
    }

Answer 1

您需要拦截表单提交并让 ajax 处理发布数据，这些是一个好的开始:

$('#service select').on('change', function(e) {
    e.preventDefault();
    $.ajax({
      method: "POST",
      url: "site-to-post-to.php",
      data: $('#service').serialize(),
    }).done(function( msg ) {
      alert( "Data Saved: " + msg );
    });
})

这将序列化表单中的数据并通过 ajax 将其发送到您指定的任何 url。您需要从 html 中删除 onchange。