Develop Reference

Sending GET Request when Button is Clicked

I'm attempting to send a GET request as soon as a button is pressed. As I'm quite inexperienced with HTML and JQuery/Ajax, I'm a little bit confused as to how to do this. My code is as following
<div id = "Reset">
<!-- <form method="get"></form> -->
<!-- <form action="https://wt.ops/reset" method="get"> -->
<button>Reset</button>
<!-- </form> -->
</div>
<script>
$("Reset").ready(function(){
$( "#Reset" ).click(function(){});
$.get( "https://wt.ops/reset", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
})});
</script>
Currently what it's doing is that it just loads the JQuery scripts automatically when the page is reloaded. But when I click the button, it does nothing.

You should attach the click handler after the document is loaded.
$("document").ready(function(){
//.. click handler
});
Your $.get should be within the click handler.
$("#Reset").click(function(){
$.get( "https://wt.ops/reset", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
});

Few things you have to update
1. this is just to ask have you added the jquery script in head
2. You have to change the id from div to button tag or remain as it is
<div>
<!-- <form method="get"></form> -->
<!-- <form action="https://wt.ops/reset" method="get"> -->
<button id="Reset">Reset</button>
<!-- </form> -->
</div>
3. You have to update the script function to below function. I have only changed the url to check the data
$(document).ready(function () {
$("#Reset").click(function () {
$.get("https://jsonplaceholder.typicode.com/todos", function (data) {
console.log(data);
alert("Load was performed.");
})
});
});

I see you use Jquery.
<div id = "reset">
<button >Reset</button>
<span id='result'> data</span>
</div>
$().ready(function(){
$( "#reset" ).click(function(){
console.log('click')
getFileFromNet();
});
function getFileFromNet(){
$.get( "https://rickandmortyapi.com/api/character/2", function( data ) {
$( "#result" ).html( data );
alert( "Load was performed." );
})
}
});
https://jsfiddle.net/eaLjb1n5/
Maybe it help you

First, you add jQuery in your html file. We use ajax method for send request.
Here is my code
<div>
<button id="submit">Reset</button>
</div>
<script>
$(document).ready(function(){
$("#submit").on("click",function(event){
$.ajax({
url: "", //your url
method: "GET",
success: function(data){
console.log(data);
},
error: function(){
alert("error");
}
});
});
});
</script>
if you have form data then you can submit form like this
<form id="form">
<input name="name" type="text"/>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function(){
$("#form").on("submit",function(event){
event.preventDefault();
var f = $(this).serialize();
$.ajax({
url: "", //your url
method: "GET",
data: f,
success: function(data){
console.log(data);
},
error: function(){
alert("error");
}
});
});
});
</script>

Site reloads when firing an AJAX-form-submit

I want to update my mySQL database with ajax. The browser should NOT reload or go to a different URL when I hit the submit-button.
My form looks like this:
<form class="directmsg_form" method="post" id="directmsg_form" name="directmsg_form">
<div class="form-group" id="directmsg_subject"></div>
<input class="form-control" style="display: none" id="directmsg_receiverid" name="directmsg_receiverid">
<div class="form-group">
<textarea class="form-control" id="directmsg_text" name="directmsg_text" placeholder="Nachricht"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" name="directmsgsend_button" id="directmsgsend_button" style="font-size: 20px">
<span class="glyphicon glyphicon-send" style="font-size: 20px"></span> Nachricht senden
</button>
</div>
</form>
And here is the javascript-code which fires the AJAX:
document.getElementById("directmsgsend_button").addEventListener('click',function (){
var data = $("#directmsg_form").serialize();
$.ajax({
type : 'POST',
url : 'directmsg_send.php',
data : data,
beforeSend: function(){
$("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> übertrage Daten ...');
},
success : function(response){
alert(response);
}
});
return false;
});
After hiting the submit-button I get the javascript-alert like I should - and then the site reloads and I don´t know why.

Add event.preventDefault() to your function:
document.getElementById("directmsgsend_button").addEventListener('click',function (event)
{
event.preventDefault();
var data = $("#directmsg_form").serialize();
$.ajax({
type : 'POST',
url : 'directmsg_send.php',
data : data,
beforeSend: function(){
$("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> übertrage Daten ...');
},
success : function(response){
alert(response);
}
});
return false;
});

As pointed out in the comments, you should add add preventDefault() to your callback function in click event. Your code would look something like this.
document.getElementById("directmsgsend_button").addEventListener('click',function (event)
{
//will prevent default behavior, reloading page in this case
event.preventDefault();
var data = $("#directmsg_form").serialize();
$.ajax({
type : 'POST',
url : 'directmsg_send.php',
data : data,
beforeSend: function(){
$("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> übertrage Daten ...');
},
success : function(response){
alert(response);
}
});
return false;
});

Obtaining data from server for POST not working

I am still quite new to Jquery and Ajax request. On the website I am developing I have a simply form element that sends the input data which is an email to the server. For some reason I cant find a way to obtain the form information to send it to the server.
Here is my Jquery code
$( document ).ready(function() {
var temp = "http://localhost:5000/"
$( "#target" ).submit(function( event ) {
var aa = $('#target').serialize();
alert( "Handler for .submit() called." + aa);
$.ajax({
type: "POST",
url: temp+"sign",
data: aa,
success: function(){},
dataType: "string"
});
});
});
it is quite messy... I am trying to diagnose the problem.
this is the form element
<form class="form-inline text-center-min" id="target" style="padding-bottom: 100px">
<div class="form-group ">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control filter" id="exampleInputEmail2" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-filter">Join</button>
</form>
Please it would be awesome for any help for this.

Use event.preventDefault(); head of your callback function.
$(document).ready(function () {
var temp = "http://localhost:5000/"
$("#target").submit(function (event) {
event.preventDefault();
var aa = $('#target').serialize();
alert("Handler for .submit() called." + aa);
$.ajax({
type: "POST",
url: temp + "sign",
data: aa,
success: function () {},
dataType: "string"
});
}); });

How to load content using Ajax

I want to load my database content using ajax and jquery. I already write a javascript and it works correctly but I can't write correctly for ajax jquery. Anyone please give me some example?
my javascript code:
<script language="javascript">
function getfilter(str){
document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";
if (str==""){
document.getElementById("result").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","Views/pfolioresult.php?q="+str,true);
xmlhttp.send();
}
</script>
<div class="sprocket-mosaic-header">
<div class="sprocket-mosaic-filter">
<ul>
<li class="all active" data-mosaic-filterby="all" onclick="getfilter(this.id)" id="all" >All</li>
<li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="android" >Android</li>
<li class="iOS" data-mosaic-filterby="iOS" onclick="getfilter(this.id)" id="ios" >IOS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="result">
ok
</div>

You can simply use Ajax and Jquery for data load. You can use
function getfilter(str){
$.ajax({
type: "POST",
//path to php page to get data
url:"pathto/getdata.php",
data: "id="+str,
success:function(result){
//here is your success action
//get data on div
$("#result").html(result);
});
}
We can do this by calling a function onclick as illustrated above or you can use JQuery's onclick event.
Now Get Id in you getdata.php page using $_POST['id'] and return your database data to ajax success and do whatever you want to do.

Do this
function getfilter(str){
document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";
if (str==""){
document.getElementById("result").innerHTML="";
return;
}
$.ajax({
url: "Views/pfolioresult.php",
type: "GET",
data: { q : str },
success: function ( responseText ) {
$("#result").html( responseText );
}
});
}
Learn it from here: https://api.jquery.com/jQuery.ajax/

Since you're using jQuery, the easiest would be to use .load()
http://api.jquery.com/load/

Try this
<script language="javascript">
function getfilter(str){
document.getElementById("result").innerHTML="<div class='sparea'><i class='fa fa-spinner fa-spin sparea' ></i><div></script";
if (str == ""){
$( "#result" ).html( "" )
return;
}
var request = $.ajax({
type: "POST",
url: "Views/pfolioresult.php",
data: { id: str }
});
request.done(function( msg ) {
$( "#result" ).html( msg );
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
}

<script>
function getfilter(str){
if (str==""){
document.getElementById("result").innerHTML="";
return;
}
$.ajax({
url: "Views/pfolioresult.php?q="+str,
type: "GET",
// data: serializedData,
success: function ( responseText ) {
$("#result").html(responseText);
}
});
}
</script>
This code works correctly but suppose i have 10,000 data in database .This code show all data at once after load but how it possible that data show one by one depent on load time that means when one item load then it show and other continuously show

Serialize a <ul>'s contents and submit form via AJAX

I need some help getting a serialized <ul> list submitted via a AJAX post form request. How would I go about doing this? Below is my current code.
HTML:
<form id="update_fruit_form" method="post" action="/update_fruits" accept-charset="UTF-8">
<ul id="list_a">
<li id="item_Apple" value="1">Red</li>
<li id="item_Green" value="2">Pear</li>
<li id="item_Banana" value="3">Yellow</li>
</ul>
<input type="submit" value="Submit">
</form>
jQuery:
$("#update_fruit_form").submit(function() {
$.ajax({
url: "update_fruits.html",
context: "#list_a" ,
success: function(){
$(this).addClass("done");
}
});
});
Thanks!

var list = {};
$('#list_a li').each(function(){
list[ $(this).attr('value') ] = $(this).html();
});
$("#update_fruit_form").submit(function() {
$.ajax({
url: "update_fruits.html",
data: list,
success: function(){
$(this).addClass("done");
}
});
});