CODEWITHSUNDEEP
javascriptjqueryjsonchatgetjson
satryacode
satryacode

Reputation: 13

How to send large data using jquery post without redirect page?

I'd like to know how to send large data using jquery POST without redirect page? I have a project to create a mobile chat, and to connect between user app and server, i use JSON. this is jquery get json script looks like, as we know jsonGet can't deal with large data.

note: bigNumber has 8000 characters.

$.getJSON('process.php?input='+bigNumber, function(data) {
    $.each(data.Chats, function(i,output)
    {
        $("#data").append(output.chat);
    });
});

this is what i get when using getJSON for sending big number: 414 (Request-URI Too Large)

So, after i send bigNumber, i'll get a response from process.php as json data and adding to the body of html.

//--- now this is my code.

html file

<script src="jquery.min.js"></script>
<script>
$(function(){
    $("#senddata").click(function() {
        $.ajax({
            dataType: "json",
            url: "process.php",
            data: { input:$("#bigNumber").val() },
            success: function(data) {
                $.each(data.Chats, function(i,output)
                {
                    $("#data").append(output.key);
                });
            },
            method: "POST"
        });
    });
});
</script>
<div id="data"></div>
<input type="text" id="bigNumber"/>
<button id="senddata">Send</button>

and this is process.php

header('Content-type: application/json');

$key = $_POST["input"];

$simpan_array = array();

$chat = array();
$chat["key"] = $key;

array_push($simpan_array, $chat);

echo json_encode(array("Chats" => $simpan_array));

and when i fill the textbox and press the "Send" button, nothing happens. what's wrong?

Just found out what the problem is, it was an error in json format, which is displayed on process.php

Upvotes: 1

Views: 3872

Answers (3)

Vijay
Vijay

Reputation: 1

Why cant you try to use websockets for chat application refer this page Web Socket Server or Introduction to HTML5 WebSocket

Upvotes: 0

bipen
bipen

Reputation: 36531

use $.post

$.post('process.php',{input: bigNumber}, function(data) {
  $.each(data.Chats, function(i,output)
  {
    $("#data").append(output.chat);
  });
},'JSON');

Upvotes: 1

Steve
Steve

Reputation: 8640

You need to use a POST request instead. And since getJSON() is just a facade for ajax(), it is pretty easy to convert:

$.ajax({
  dataType: "json",
  url: "process.php",
  data: { input:bigNumber },
  success: function(data) {
    $.each(data.Chats, function(i,output)
    {
        $("#data").append(output.chat);
    });
  },
  method: "post"
});

Upvotes: 2

Related Questions