Display the JSON response - javascript

How to display the JSON response in jsp page through ajax...
function doAjaxPost() {
var name = $('#name').val();
var password = $('#password').val();
var gender = $('#gender').val();
var aboutYou = $('#aboutYou').val();
$.ajax({
type: "POST",
url: "add.htm",
data: "name=" + name + "&password=" + password + "&gender=" + gender + "&aboutYou=" + aboutYou,
success: function(response){
alert('name : '+response);
},
error: function(e){
alert('Error: ' + e);
}
});
Here in this alert('name : '+response); I get the response ,but i want to display on this jsp page.. This is form data which i have to display...plz help..thanks in advance

You need to parse the json data using json parser and then populate tables..!
var resultData = JSON.parse(response);
//resultDate will ve json object in the form of JS objects
resultData.membervalues (or arrays)

Hmm... I don't understand your problem. What do you want to display and where? Create a on your page where you want and replace your alert with:
$('#myResponce').html(responce);
is this what you want?

Related

Ajax not working well

I'm trying to submit a form using Ajax , but it doesn't work here is my Ajax :
$(document).ready(function(){
$("#submit").click(function(event){
var ad1 = $("#ad1").val();
var ad2 = $("ad2").val();
var city = $("city").val();
var state = $("state").val();
var zip = $("zip").val();
var country = $("country").val();
var mm = $("mm").val();
var dd = $("dd").val();
var yy = $("yy").val();
var lname = $("lname").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1='+ name + '&ad11='+ ad1 + '&ad21='+ ad2 + '&city1='+ city + '&state1='+ state + '&zip1='+ zip + '&country1='+ country + '&mm1='+ mm + '&yy1='+ yy + '&dd1='+ dd + '&lname1=';
if(name=='')
{
alert("");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "action.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
and it's not giving any result just giving data in header
the result is like :
I copied the javascript to the form page it's now working ,but the ajax is returning a blank alert while it should be "Form Submitted Succesfully"
I guess that it's an error of inclusion of the file , but i'm using the right directories.
here is action.php :
<?php
$con = mysqli_connect("server","user","pass","db");
$name=$_POST['name1'];
$ad1=$_POST['ad11'];
$ad2=$_POST['ad21'];
$city=$_POST['city1'];
$state=$_POST['state1'];
$zip=$_POST['zip1'];
$country=$_POST['country1'];
$mm=$_POST['mm1'];
$dd=$_POST['dd1'];
$yy=$_POST['yy1'];
$dob=$dd."/".$mm."/".$yy;
$mm=$_POST['mm1'];
$name=$_POST['name1'];
$lname=$_POST['lname1'];
$r2=rand(10000,90000);
$query = mysqli_query($con,"insert into users values('$r2','$name','$lname','$ad1','$ad2','$city','$state','$zip','$country','$dob')");
mysqli_close($con);
echo "Form Submitted Succesfully";
?>
This name variable is not have defined in ajax file var dataString = 'name1='+ name + so name would be an empty string
=> if(name=='')
{
alert("");
} executed. Please add string into alert and check again :)

How can i validate recaptcha with ajax?

my function in js have this code:
$.ajax({
url: "ajax.php",
type: 'POST',
data: 'act=newAccount&email=' + email + '&password=' + password + '&first-name=' + firstName + '&last-name=' + lastName + '&company-name=' + companyName,
success: function(data)
{
json = JSON.parse(data);
if (json === true)
{
console.log("data");
$("#new-account-form")[0].reset();
window.location.replace('login.php');
}
else
{
$(".error-message span").html('Your regestry failed. Please, insert valid data.');
$('.error-message').fadeIn('slow', function () {
$('.error-message').delay(5000).fadeOut('slow');
});
}
}
});
now, i want validate recaptha in my ajax.php but i dont know how i do...
thanks you all
You'll need a Captcha images' displayer and some code to validate it. I recommend Securimage, it worked fine for me, and it is so easy to implement. Have a look at it at http://www.phpcaptcha.org/documentation/quickstart-guide/

Javascript / JQuery loop through posted ajax data string to assign new values to

I have a function which updates a database via ajax. My issue is then how to update the data displayed on the page to show updated details. The POST data can vary and therefore the datastring would be something like this:
var dataString = '[name resource we are editing]=1' +
'&para1='+ para1 +
'&para2=' + para2+
'&para3=' + para3
I want the function below to split or loop through each of the POST variables in the datastring to update the text of an element on the page. I cannot figure out how.
function editAccount(dataString, details, form){
status = $(".status");
$.ajax({
type: "POST",
url: "<?php echo BASE_PATH; ?>/edit/",
data: dataString,
success: function(response) {
$.each(response, function(key, value) {
success_code = key;
message = value;
});
if(success_code == 1){
status.text(message).addClass("valid");
//show details and hide form
$("#" + details).show();
$("#" + form).hide();
//HOW to do below?
//update details being displayed with datasource data
//loop through dataString to assign eg. $('#para1')text(para1);
} else {
status.text(message).addClass("invalid");
}
},
error: function(response){
status.text("There was a problem updating your details into our database. Please contact us to report this error.").addClass("invalid");
}
});
}
As mentioned in a previous comment, I would suggest declaring the dataString variable as an object:
var dataString = { '[name resource we are editing]' : 1,
'para1': para1,
'para2': para2,
'para3': para3
}
Now it'll be much easier to loop over the params, just using the function each, for instance, which you already use in your code:
$.each(dataString, function(key, value) {
// Do stuff with each param
});
EDIT:
As #Qpirate suggests, you also can use the javascript for loop:
for(var key in dataString){
// value => dataString[key]
}

pass values from textbox to url in javascript

How can i pass values from textbox to a url on click of a button using javascript? I have a login page. when i input a username and password in a textbox, the url should take the values and give the response. How can i do it?
http://url.php?id=login&email=<email>&password=<password>
This url gives response as {"status":0,"msg":"Email is Wrong!"} and when i put my id and pwd in url
http://url.php?id=login&email=abc#gmail.com&password=abc
url give response as
{"status":1,"msg":"Session is active","session_id":"p246igeaadcdui7hb0o2677c53","user_id":"13"}
Thanks in advance..
function A() {
$.getJSON('http:url.php?id=login&email=&password=', function (data) {
alert(data.status);
alert(data.msg);
});
}
function B() {
$.getJSON('url.php?id=login&email=&password=', function (data) {
alert(data.user_id);
document.getElementById("login").innerHTML;
});
}
Username :
Password :
This is what i am working on
Plain javascript:
var email = document.getElementById("email").value;
var password = document.getElementById("password ").value;
var url = "http://url.php?id=login&email="+encodeURIComponent(email)+"&password="+encodeURIComponent(password);
window.location.href = url;
jQuery:
var email = $("#email").val();
var password = $("#password").val();
var url = "http://url.php?id=login&email="+encodeURIComponent(email)+"&password="+encodeURIComponent(password);
window.location.href = url;
Note that for my example to work, the email and the password input fields must have the id set to email and password respectively.
ajax version:
//same as satoshi version
var myUrl = "http://url.php?id=login&email="+encodeURIComponent(email)+"& password="+encodeURIComponent(password);
$.ajax({
url : myUrl,
dataType : 'json',
success : function(data){
alert( data.status ? ("logged in " + data.msg) : ("error: " + data.msg));
},
error : function(jqXHR, textStatus, errorThrown){
alert('error ' + errorThrown);
}
});

Looking for an standard way to post json data on full postback

I wonder if I have any other method but a hidden field to post a JSON object to the server on full postback.
Imagine you have a form (with textboxes, checkboxes, etc) and you need to post a json string when the user post the form. This means, I would post all the form values + the json string but I can't come up with any solution but a hidden field.
Just wondering if there is any other option.
Thanks!
Hidden field is your only option. Unless you want to display the JSON to the user, in that case you can put it into a textarea or text input.
I used this recently in my web app:
$('#submit').live('click',function(){
var postData = {};
$('#items tr').not(':first').each(function(index, value) {
var keyPrefix = 'data[' + index + ']';
postData[keyPrefix + '[index]'] = index;
postData[keyPrefix + '[supp_short_code]'] = $(this).closest('tr').find('.supp_short_code').text();
postData[keyPrefix + '[project_ref]'] = $(this).closest('tr').find('.project_ref').text();
postData[keyPrefix + '[om_part_no]'] = $(this).closest('tr').find('.om_part_no').text();
postData[keyPrefix + '[description]'] = $(this).closest('tr').find('.description').text();
postData[keyPrefix + '[quantity_input]'] = $(this).closest('tr').find('.quantity_input').val();
postData[keyPrefix + '[cost_of_items]'] = $(this).closest('tr').find('.cost_of_items').text();
postData[keyPrefix + '[cost_total_td]'] = $(this).closest('tr').find('.cost_total_td').text();
});
$.ajax
({
type: "POST",
url: "order.php",
dataType: "json",
data: postData,
cache: false,
success: function(order_id)
{
alert("Order Saved");
$('#assigned_id').html(order_id);
}
});
});
Give this a try in your application or post you html and i can form the json...

Categories

Resources