在Django视图中使用jqueryajax发布表的rowdata

post the rowdata of table using jqueryajax in Django views

本文关键字:布表 rowdata jqueryajax Django 视图      更新时间:2024-07-01

这是我的视图

    def endpointdetails(request): 
          return HttpResponse("Finally I have redirected.MY values are here)

这是我的模板

Html:

    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>  
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <div><table><tr><td><input type="button" value="Add Row" onclick="addRow('dataTable')" /></td><td><input type="button" value="Delete Row" onclick="removeRow()" /></td></tr></table></div>
    <form id = "Endpoint" name="myForm" action = '/endpointdetails/' method = "POST">{% csrf_token %}
        <table id="dataTable" style = "border-collapse:collapse;width:1100px;" border="1">

            <tr><td style='width:60px;'>
   <input type="checkbox" name="chk" class="check" ></td><td style='width:130px;'>              <span></span>
  <input type='text' class = 'productname' style='display:none;width:150px;'                                      value="Product Name">
  </td><td style='width:130px;'><span></span><input type='text' class = 'endpoint' style='display:none;width:150px;' value="EndPoint Name"></td><td style='width:130px;'>  
    <span></span><input type='text' class = 'ipaddress'  style='display:none;width:150px;' value="IP Address"></td><td style='width:130px;'>
    <span></span><input type='text' class = 'server' style='display:none;width:150px;' value="ServerName"></td>
     <td style='width:130px;'><span></span><input type='text' class = 'Hmsg' style='display:none;width:150px;' value="Actual High Message"></td>
     <td style='width:130px;'><span></span><input type='text' class = 'lmsg' style='display:none;width:150px;' value="Actual Low Message"></td>
    <td style='width:130px;'>        
    <input type='button' id='edit' value='Edit' onclick='editRow(this);'><input type='button'   id='update' value='Update' onclick='updateRow(this);' style='display:none;'>
    </td></tr>
        </table> 
        </form> 

CSS:

   <style type="text/css">
        .democlass{
            color:red;
        }
    </style>

脚本:

    <SCRIPT type="text/javascript" language="javascript">
        function addRow() { var rowCount = $("#dataTable tr").length;            
        rowCount = parseInt(rowCount)-1; $("#dataTable tr:eq("+rowCount+")").after("<tr><td  
         style='width:60px;'><input type='checkbox' name='chk' class='check'></td><td  
          style='width:130px;'><span></span><input type='text' class = 'productname'  
         style='display:none;width:150px;' value='Product Name'></td><td style='width:130px;'><span>
         </span><input type='text' class = 'endpoint' style='display:none;width:150px;' 
         value='EndPoint Name'></td><td style='width:130px;'><span></span><input type='text' class =   
         'ipaddress' style='display:none;width:150px;' value='IPAddress'></td><td 
          style='width:130px;'><span></span><input type='text' class = 'server'  
         style='display:none;width:150px;' value='ServerName'></td><td style='width:130px;'><span>       
         </span><input type='text' class = 'Hmsg' style='display:none;width:150px;'     
        value='ActualHighMessage'></td><td style='width:130px;'><span></span><input type='text'  
   class = 'lmsg' style='display:none;width:150px;' value='Actual Low Message'></td><td 
       style='width:130px;'><input type='button' id='edit' value='Edit'  
       onclick='editRow(this);'><input type='button' id='update' value='Update'    
          onclick='updateRow(this);' 
             style='display:none;'></td></tr>");
        }
                function removeRow() {          
               $(".check").each(function(i,obj){
                if($(obj).is(":checked")){
                    if($("#dataTable tr").length > 1)
                        $(obj).parent().parent().remove();
                }           });         }
        function editRow(object) { var rowObj = $(object).parent().parent();            $(rowObj).find("td").each(function(i,obj){
                $(obj).find("span").hide('fast',function(){
                    $(obj).find("input").show('slow');
                });             });               
             $(object).parent().find("input#edit").hide('fast',function(){
                $(object).parent().find("input#update").show('slow');           
            });         }
                function updateRow(object) {
            alert(csrftoken); 
       var rowObj = $(object).parent().parent();                                       
       var prodname,endpoint,ip,server,Hmsg,lmsg;           $(rowObj).find("td").each(function(i,obj){
                if(i==1)
                    prodname = $(obj).find("input.productname").val();
                if(i==2)
                    endpoint = $(obj).find("input.endpoint").val();
                if(i==3)
                    ip = $(obj).find("input.ipaddress").val();
                if(i==4)
                    server = $(obj).find("input.server").val();
                if(i==5)
                    Hmsg = $(obj).find("input.Hmsg").val();
                if(i==6)
                    lsmg = $(obj).find("input.lmsg").val();             });

            $.post("/endpointdetails/",{Hmsg:Hmsg,lmsg:lmsg} ,function(received){             
             alert(received); });
                }

    </script>

我已经尝试了上面的代码,但无法重定向到视图。

我读过Django关于CSRF的文档,但不知道如何使用它。

有人能解释一下出了什么问题吗

如果其CSRF问题。。。然后在你的帖子数据中再添加一个参数csrfmiddlewaretoken,如下所示,你的代码就可以了。

$.post("/endpointdetails/",
          {'Hmsg':Hmsg, 'lmsg':lmsg, 'csrfmiddlewaretoken':$("input[name='csrfmiddlewaretoken']").val()} ,function(received){             
             alert(received); });