尝试以json格式向服务器提交表单

Question

我是Jquery的初学者。现在我试图提交表单（发布）到服务器，表单将由服务器处理。这里是我的表单代码：

<form name="broadcastform" id="broadcastform" method="post" action=""> 


     <h1 id="broadcast_title" style="color:rgba(255,255,255,0.7);font-size: 250%;font-weight: 400;margin-top:-10px" align="middle">BROADCAST</h1> 
     <hr style="border-color:#ffffff;weight:40%;margin:0 auto;margin-bottom:20px"> 
     <center class="page_intro"> 
     <div style="margin-top:-1%;color:rgba(255,255,255,0.7);width:90%;margin-bottom:12.5%" class="page_intro"> 
     <font size="6" style="line-height: 150%"class="page_intro"><center>Welcome!</center></font> 
     <font size="5" style=" padding-top:20px;line-height: 150%;font-weight:normal;opacity:0.7"class="page_intro"><center>This is a Tool to Configure and Broadcast Your Modulator. Please Follow the Steps and Fill in the Parameter Fields for Your Preference. Enjoy the Tour !</center></font> 
     </div> 
     </center> 
     <!-- Page Basic Setting --> 
     <select name="InputSource" class="required page_basic" style="margin-left:23%" form="broadcastform" > 

        <option value="">Broadcast Input</option>    
        <option value="0">HDMIPhy</option>    
        <option value="1">USB Streaming</option>    
        <option value="2">MPEC-TS Interface</option>    
        <option value="3">VIP(Ethernet)</option>   
     </select> 
     <select name="ModulationMode"class= "page_basic required" style="margin-left:23%" form="broadcastform">    
        <option value="">Modulation Mode</option>    
        <option value="1">ATSC</option>    
        <option value="2">DTMB</option>    
        <option value="3">DVB</option>    
        <option value="4">ISDB</option>   
     </select>   
     <input type= "text" name= "ProviderName" placeholder="Provider Name" maxlength="16" class="required page_basic">  
     <input type= "text" name= "ServiceName" placeholder="Service Name" maxlength="16" class="required page_basic" style="margin-bottom:8%"> 

     <!-- Page IP Setting. Only with ETH Input Source--> 
     <input type= "text" name= "LocalIP" class="page_ip" placeholder="Local IP" style="margin-top:30px" id="LocalIp">    
     <input type= "text" name= "RemoteVIPAddr" class="page_ip" style="margin-top:7%" placeholder="Remote VIP Address" id="RemoteIp"> 
     <input type= "text" name= "RemoteVIPPort" class="page_ip" style="margin-top:7%;margin-bottom:11.8%" placeholder="Remote VIP Port"id="RemoteVIPPort"> 

     <!-- Page RF Setting -->    
     <input type= "text" name= "RFOutFreq" class="page_rf" style="margin-top:7%" placeholder="RF Output Frequency" id="RFOutFreq"> 
     <input type= "text" name= "RFIfFreq" class="page_rf"style="margin-top:7%" placeholder="RF IF Frequency" id="RFIfFreq">   
     <input type= "text" name= "RFBandwidth" class="page_rf" style="margin-top:7%;margin-bottom:11.8%" placeholder="RF Bandwidth" id="RFBandwidth"> 

     <!-- Page EncryptKey Setting -->    
     <input type= "text" name= "EncryptKeyLo" class="page_encrypt" style= "margin-top:13%" placeholder="Encrypt Key Low" id="EncryptKeyLo"> 
     <input type= "text" name= "EncryptKeyHi" class="page_encrypt" style=" margin-top:13%;margin-bottom:16.1%" placeholder="Encrypt Key High" id="EncryptKeyHi"> 
</form> 

，这是我的Jquery Ajax代码提交：

$(document).ready(function(){ 
     // click on button submit 
     $("#submit").on('click', function(){ 
      // send ajax 
      $.ajax({ 
       url: '192.168.0.10', // url where to submit the request 
       type : "POST", // type of action POST || GET 
       dataType : 'json', // data type 
       data : $("#broadcastform").serialize(), // post data || get data 
       success : function(result) { 
        // you can see the result from the console 
        // tab of the developer tools 
        console.log(result); 
       }, 
       error: function(xhr, resp, text) { 
        console.log(xhr, resp, text); 
       } 
      }) 
     }); 
    }); 

我试试，

var result = $('form').serializeArray(); 
var j = $('#result').text(JSON.stringify(result)) 

以JSON形式似乎正确的，但不知何故，当它发送到服务器，服务器仍然“x-www-form-urlencoded”数据。我做错了什么？ 另外，是否有可能看到我在本地ip中测试时提交的数据字符串？

Answer 1

你的问题是，form元素仍然正常提交，所以你的AJAX请求没有完成。

若要解决此问题，请挂钩至表格的submit事件，并在所引发的事件上调用preventDefault()。试试这个：

$("#broadcastform").on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: '192.168.0.10', 
     type : "POST", 
     dataType : 'json', 
     data: $(this).serialize(), 
     success : function(result) { 
      console.log(result); 
     }, 
     error: function(xhr, resp, text) { 
      console.log(xhr, resp, text); 
     } 
    }) 
}); 

您可能还想仔细检查您发送给的URL。它看起来像你需要包括协议，如果你使用绝对的URL，或使它相对而为。