从ajax传递数据时防止页面完全刷新

I am trying to submit simple form on the header php file and accessing its value to change the content of the page in one of my views. I am able to pass the ajax value but when I do that complete header page get reloaded again. Please help me how to prevent the reload of the page.

我试图在标题php文件上提交简单的表单并访问其值以在我的一个视图中更改页面的内容。我能够传递ajax值，但是当我这样做时，完整的页眉页面会再次重新加载。请帮我如何防止重新加载页面。

Here is my form in the header file

这是头文件中的表单

<form  class="choose-form form-holder" >
                                <select id="usertype" onChange="selectChange()">
                                    <option value=1>JS</option>
                                    <option value=2>JP</option>
                                </select>
</form>

Here is my Script to submit the form in the php header file

这是我的脚本在php头文件中提交表单

<script>
function selectChange() {
            debugger;
            var usertype = $('#usertype').val();
                $.ajax({
                    type: 'GET',
                    data: {usertype: usertype},
                    success: function (response) {                  
                        $('#response').html(response);
                    },
                    error: function () {
                        alert("error");
                    }
                });
                return false;
        }
</script>

This is my code in php view page to access the type and change the content

这是我在php视图页面中的代码，用于访问类型和更改内容

<div id="response">
        <?php if(!empty($_GET['usertype'])){
            $type = $_GET['usertype'];

        }
?></div>

<?php if ((isset($type)) && ($type == 2)){?>
            //some other content
<?php }else{  ?>
    //change the content
<?php } ?>

1 个解决方案

#1

Try below:

试试以下：

<script>
function selectChange(event) {
    event.preventDefault();
    debugger;
    var usertype = $('#usertype').val();
    $.ajax({
        type: 'GET',
        data: {usertype: usertype},
        success: function (response) {
            $('#response').html(response);
        },
        error: function () {
            alert("error");
        }
    });
    return false;
}