Pawan Pawan - 3 months ago 17
JSON Question

Try to submit a form to server in json form

I'm a beginner to Jquery. Now I'm trying to submit a form(post) to server and the form will be processed by server. Here is my form code:

<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>


And this is my Jquery ajax code to submit:

$(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);
}
})
});
});


I try,

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


enter image description here

The form in json seems right but somehow when it send to server, the server still get "x-www-form-urlencoded" data. What did I do wrong?
And also, is it possible to see the data string I submitted when I'm testing in local ip?

Answer

Your issue is that the form element is still being submit normally, so your AJAX request doesn't complete.

To fix this, hook to the submit event of the form, and call preventDefault() on the event raised. Try this:

$("#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);
        }
    })
});

You may also want to double check the URL you're sending to. It looks like you would need to include the protocol if you're using an absolute URL, or make it relative instead.

Comments