1. 程式人生 > >DJango第六天jQuery+ajax

DJango第六天jQuery+ajax

ajax 模板
KaTeX parse error: Expected '}', got 'EOF' at end of input: … data:{'title':("#title").val()},
success:function(data){傳送成功後的回撥函式
console.log(data);
if(data==‘ok’){
location.href=/classes/
}else{
$(’#errormsg’).text(data)
}
}

使用 AJAX +JQUREY 提交
普通 form表單提交時會重新整理頁面
如果需要保持原頁面 需要用到AJAX post

<p>
            <input type="text" id="title">
            <input type="button" value="提交" onclick="AjaxSend()">

        </p>

下面寫

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function showModal(){
            document.getElementById('shadow').classList.remove('hide');
            document.getElementById('modal').classList.remove('hide');
        }
        function AjaxSend(){
            $.ajax({
                url:'/modal_add_class/',
                type:'POST',
                data:{'title':$("#title").val()},
                success:function(data){
                    console.log(data);
                if(data=='ok'){
                    alert('新增成功')
                }else{
                    alert('新增不陳宮')
                }
                }

            })
        }

    </script>

需要注意的是 因為取值為title 所以input 的ID 為 title
跳轉網頁用 location.href

function AjaxSend(){
            $.ajax({
                url:'/modal_add_class/',
                type:'POST',
                data:{'title':$("#title").val()},
                success:function(data){
                    console.log(data);
                if(data=='ok'){
                    location.href=/classes/
                }else{
                    $('#errormsg').text(data)
                }
                }