how to send very long data in ajax url? - javascript

i am using php and ajax together to access data from user and insert into database.problem is that it works fine with small string but when i try to send data on 10000 characters browser prompts an error saying url to long.. i can make change in php but i want it to be dynamic so i have to it using this way only.. help me plz.
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php?title="+x+"&description="+y, true);
xhttp.send();
}
}

You cannot transfer large data via url (as messerbill said). You have to send them in the Body:
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("title="+x+"&description="+y");
}
}
inside the PHP-Script you get the data via the $_POST Array, not via the $_GET Array!

Related

JS: HTML is not dynamically changing

I am building an web that allows user to like a post when they click a button. CreateLike function calls API and creates a like object however, I would like to have the number of likes updated right away without reloading. I built another API that returns the number of likes for a post. Function LikeCount should put the number of likes into the p tag. It works initially when I load the page however, the value does not change when I click the button even though I can see that the API is called. (After reloading the page the number changes as expected) What am I doing wrong?
I have this HTML:
<p class="like-count" id={{post.id}}></p>
<script>LikeCount({{post.id}});</script>
<button type="button" class="btn-like" onclick="CreateLike({{user.id}},{{post.id}})"></button>
with JS functions:
function CreateLike (userid,postid) {
xhr = new XMLHttpRequest();
var url = "{% url 'likes' %}";
var csrftoken = getCookie('csrftoken')
xhr.open("POST", url, true);
xhr.setRequestHeader("X-CSRFToken",'{{ csrf_token }}')
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json.email + ", " + json.name)
}
}
var data = JSON.stringify({csrfmiddlewaretoken:csrftoken,"user":userid,"post":postid});
xhr.send(data);
LikeCount(postid);
}
function LikeCount(postid) {
var xmlhttp = new XMLHttpRequest();
var url = "{% url 'likecount' id=112233 %}".replace("112233", postid);
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = arr.like_count;
document.getElementById(postid).innerHTML = out;
}
}
Like count API looks like this:
{
"like_count": 1
}
if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
LikeCount(); //Put your get like count here
} else {
// Handle Errors
}
}
Call LikeCount only after receiving the response of your POST request. Right now you're immediately sending a GET request without ensuring if the previous POST request got completed.
Added
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
var myArr = JSON.parse(this.responseText);
LikeCount(myArr.post);
}
};
before
xhr.send(data);
and it fixed the issue.

Cannot pass data to database with JSON ajax?

1 Ajax (Working able to send data to db)
var ajax=new XMLHttpRequest();
ajax.onreadystatechange=function(){
if(ajax.readyState === 4 && ajax.status === 200) {
alert(ajax.responseText);
//window.location.replace('login_form.php');
}
};
ajax.open("POST","register.php",false);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(parameters);
} // End of else statement
} // End of function
2 JSON AJAX (not Working - data are not sent to my db)
var ajax=new XMLHttpRequest();
ajax.onreadystatechange=function(){
if(ajax.readyState === 4 && ajax.status === 200) {
var passData = JSON.parse(ajax.responseText);
}
};
ajax.open("POST","register.php",false);
ajax.setRequestHeader("Content-type", "application/json");
ajax.send(parameters);
} // End of else statement
} // End of function
a) With ajax when i click on my btn register my data is being sent to my database but with json it does not working (both of them show no error).
b) I'm not able to re-direct the user to the login form even after a successful registration, it just remain on the registration page

Unable to get exact data from XML into JavaScript

I am just trying to alert the email from the XML but I am getting this as an alert.
▛▛email1#mail.com ▛
Help me in removing these box symbols. I actually wanted to validate the email, but I couldn't do that because the value returned contains these symbols.
JavaScript:
function process(){
if(xmlhttp.readyState == 4 || xmlhttp.readyState == 0){
xmlhttp.open("GET", "../text/info.xml", true);
xmlhttp.onreadystatechange = responseServer;
xmlhttp.send();
} else {
setTimeout("process()", 1500);
}
}
function responseServer(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
docxml = xmlhttp.responseXML;
emails = docxml.getElementsByTagName('email');
alert(emails[0].firstChild.nodeValue);
}
}
Replace
alert( emails[0].firstChild.nodeValue );
with
alert( emails[0].firstChild.textContent );

AJAX xmlhttp.open sumit data using POST method

I am trying to send a form data using POST method and xmlhttp.open
Please help find the error in my code
function submitChat() {
if (form1.msg.value == '' ) {
alert ('ALL FIELDS ARE MANDATORY');
return;
}
var xmlhttp = new XMLHttpRequest();
var msg = form1.msg.value;
var params = 'msg=helloooooooo';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', 'rtest.php?rid=14', true);
xmlhttp.send(params);
}
Everything is fine and it is working with GET method. but POST method is not working. Please help.

Error to getting response while sending ajax request

I'm new to Ajax. I'm writing two function in one file called home.php and make an Ajax call to members.php.
My problem is when I send an data with ajax call I fail to get response.
home.php
<script language="javascript" type="text/javascript">
var httpObject=false;
var httpObject1=false;
if(window.XMLHttpRequest){
httpObject = new XMLHttpRequest();
httpObject1 = new XMLHttpRequest();
}else if(window.ActiveXObject){
httpObject = new ActiveXObject("Microsoft.XMLHttp");
httpObject1 = new ActiveXObject("Microsoft.XMLHttp");
}
function logout(){
if(httpObject.readyState == 4 && httpObject.status == 200){
var response = httpObject.responseText;
if(response == "logout"){
window.location.href="index.php";
}
else{
error.innerHTML = "Sorry, Invalid Login.";
}
}
}
function get_Request_Member_List(type){
var member_Type = type;
var queryString = "?data1=" + member_Type ;
if(httpObject1.readyState == 4 && httpObject1.status == 200){
var response = httpObject1.responseText;
document.getElementById(type).innerHTML = response;
}
}
httpObject.open("GET", "logout.php" ,true);
httpObject.send(null);
httpObject1.open("GET", "members.php"+queryString ,true);
httpObject1.send(null);
</script>
members.php
<?php
echo "hello";
?>
Don't forget to add an onreadystatechange event handler to your XMLHTTPRequest, e.g.:
httpObject.onreadystatechange = logout;

Categories

Resources