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

时间:2018-05-03 06:58:51

标签: javascript php ajax

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

这是我在表头文件中的表单

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

这是我在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>

这是我在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 个答案:

答案 0 :(得分:-1)

尝试以下:

<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;
}