javascript - 尝试以 json 形式向服务器提交表单

Question

我是 Jquery 的初学者。现在我正在尝试向服务器提交一个表单(post)，该表单将由服务器处理。这是我的表单代码:

<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，则看起来您需要包含协议(protocol)，或者改成相对。