JS請求服務器,並返回信息,請求過程中不需要跳轉頁面


js請求服務器,並返回信息,請求過程中不需要跳轉頁面

這個可以通過jQuery框架輕松實現,jQuery中包含多種ajax的請求方式,詳細可以參考下對應 的API。

你上面定義的按鈕類型是submit,如果是在form當中,將會自動提交當前form表單,建議,如果可能的話將其修改為button類型。

下面給出通過jQuery的$.post方式,異步獲取服務器的JSON數據。

功能代碼:

<script type="text/javascript">
    $(function(){
        // 定義存放服務器返回值的變量
        var jsonData = null;
        $('#submitBtn').click(function(){
            // 請求的參數
            var params = {};
            $.post('json.json', params, function(data){
                // 這里data就是返回的JSON對象
                jsonData = data;
                alert(jsonData.name);
            }, 'json');
        });
    });
</script>

完整代碼:

<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="
 
<script type="text/javascript">
    $(function(){
        // 定義存放服務器返回值的變量
        var jsonData = null;
        $('#submitBtn').click(function(){
           // 請求的參數
            var params = {};
            $.post('json.json', params, function(data){
                // 這里data就是返回的JSON對象
                jsonData = data;
                alert(jsonData.name);
            }, 'json');
        });
    });
</script>
</head>
<body>
<div>
    <input type="button" value="提交" id="submitBtn"/>
</div>
</body>
</html>

 json.json文件內容:

{
    "name" : "Steven",
    "sex"  : "Male",
    "age"  : 10
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM