>>>> Subscribe us for more updates <<<<

jQuery.post()

$.post( "test.php" );

$.post( "test.php", { name: "John", time: "2pm" } );

$.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );

$.post( "test.php", $( "#testform" ).serialize() );

$.post( "test.php", function( data ) {



  alert( "Data Loaded: " + data );

});

$.post( "test.php", { name: "John", time: "2pm" })



  .done(function( data ) {



    alert( "Data Loaded: " + data );



  });

$.get( "test.php" );

$.get( "test.php", { name: "John", time: "2pm" } );

$.get( "test.php", { "choices[]": ["Jon", "Susan"] } );

$.get( "test.php", function( data ) {



  alert( "Data Loaded: " + data );



});

$.get( "test.cgi", { name: "John", time: "2pm" } )



  .done(function( data ) {



    alert( "Data Loaded: " + data );



  });

Extracting URL Data with Jquery and Ajax

About the Functionality

  For Extracying the URL Data we need the HTML file (for to send the request and get the response from the php file) and The PHP file(to get the request and process that and send back to the HTML page ) that request and response will be done using the Jquery Ajax Request , PHP file_get _Contents() function in PHP side.

At First the URL will be pasted in the text box that URL will be send to the PHP file as a Request using Jquery Ajax Functionality and the PHP file get the Whole SIte details from that link and it will give the response to the jquery request that function will get the title, image, description name of the website everything from the response and then it will show in the div #linkbox in Ajax

Basically Why we are using the PHP for getting the file request means that is a server side script but javascript or jquery is not a server side script that need to be get the whole site details thats why the reason we are using the PHP file here.

Javascript and HTML Code

$('#content').keyup(function(){} - content is the ID of the textbox. Using $(this).val() getting the textbox value. 

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type="text/javascript">

  $(document).ready(function()
  {
    $("#contentbox").keyup(function()
    {
        var content=$(this).val();
        var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        // Filtering URL from the content using regular expressions
        var url= content.match(urlRegex);

        if(url.length>0)
        {
          $("#linkbox").slideDown('show');
          $("#linkbox").html("<img src='link_loader.gif'>");
          // Getting cross domain data 
          $.get("urlget.php?url="+url,function(response)
        {
        // Loading <title></title>data
        var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
        // Loading first .png image src='' data 
        var logo=(/src='(.*?).png'/m).exec(response)[1];
        $("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
        });
        }
        return false;
    });
  });

HTML code

<textarea id="contentbox"></textarea>
<div id="linkbox"></div>
</script>

Why used urlget.php

Ajax origin policy we could not access the cross domain data with ajax request $.get("http://www.yahoo.com",function(response){ });. So that using local file(urlget.php) accessing the cross domain data.

urlget.php

Contains PHP code using file_get_contents function loading the URL data. Eg:urlget.php?url=http://yahoo.com

<?php
if($_GET['url'])
{
   $url=$_GET['url'];
   echo file_get_contents($url);
}
?>

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}

.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}

#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}

Ajax fetch multiple values from php code

index.html

<div class="first">
 <label >member</label>
         <select name='member' id='member' onchange='change(this.value);'>
           <option value=''>----Select----</option>
             </select>  
            <label>father</label>
            <input type="text" name='father' id='father' readonly ></input>
           <label>last name</label>
          <input type="text" name='father' id='last_name' readonly ></input>
   </div>

<script type="text/javascript">
function change(ele) {
    var element = ele;
    var info = "id="+element;
    $.ajax({
   type: "GET",
   url: "ajax.php",
   data: info,
   success: function(result){
    var split = result.split('@');
var one = split[0];
var two = split[1];
     $("#last_name").attr("value",one);
     $("#father").attr("value",two);
   }
 });
}
</script>

<?php
include "includes/db_connect.php";
$result='';
$a='';
if($_GET)
{
if(isset($_GET['id']))
{
    $id=$_GET['id'];
     $select = mysql_query("select * from member where id='$id'");
               while($row = mysql_fetch_array($select))
                        { 
                        $last_name = $row['last_name']; 
                      $a=$last_name;
               
            } 
            $select = mysql_query("select * from group where id='$id'");
            $row1 = mysql_fetch_array($select);
            $father= $row1['father'];
            $b=$father;
            $result=$a.'@'.$b;
            echo $result;
      
} 
?>

Ajax delete list lively PHP

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>



<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

</script>

delete.php

onkeyup with javascript like ajax

PHP validation With AJAX

<?php
// If the form was submitted, scrub the input (server-side validation)
// see below in the html for the client-side validation using jQuery
$name = '';
$gender = '';
$address = '';
$email = '';
$username = '';
$password = '';
$output = '';
if($_POST) {
  // collect all input and trim to remove leading and trailing whitespaces
  $name = trim($_POST['name']);
  $gender = trim($_POST['gender']);
  $address = trim($_POST['address']);
  $email = trim($_POST['email']);
  $username = trim($_POST['username']);
  $password = trim($_POST['password']);

  $errors = array();

  // Validate the input
  if (strlen($name) == 0)
    array_push($errors, "Please enter your name");
  if (!(strcmp($gender, "Male") || strcmp($gender, "Female") || strcmp($gender, "Other")))
    array_push($errors, "Please specify your gender");

  if (strlen($address) == 0)
    array_push($errors, "Please specify your address");
 
  if (!filter_var($email, FILTER_VALIDATE_EMAIL))
    array_push($errors, "Please specify a valid email address");
 
  if (strlen($username) == 0)
    array_push($errors, "Please enter a valid username");
 
  if (strlen($password) < 5)
    array_push($errors, "Please enter a password. Passwords must contain at least 5 characters.");
 
  // If no errors were found, proceed with storing the user input
  if (count($errors) == 0) {
    array_push($errors, "No errors were found. Thanks!");
  }

  //Prepare errors for output
  $output = '';
  foreach($errors as $val) {
    $output = "<p class='output'>$val</p>";
  }

}
?>
<html>
<head>
    <!-- Define some CSS -->
  <style type="text/css">
    .label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
    #register-form label.error, .output {color:#FB3A3A;font-weight:bold;}
  </style>

  <!-- Load jQuery and the validate plugin -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

  <!-- jQuery Form Validation code -->
  <script>

  // When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("#register-form").validate({
 
        // Specify the validation rules
        rules: {
            name: "required",
            gender: "required",
            address: "required",
            email: {
                required: true,
                email: true
            },
            username: "required",
            password: {
                required: true,
                minlength: 5
            }
        },
     
        // Specify the validation error messages
        messages: {
            name: "-->Please enter your name",
            gender: "-->Please specify your gender",
            address: "-->Please enter your address",
            email: "-->Please enter a valid email address",
            username: "-->Please enter a valid username",
            password: {
                required: "-->Please provide a password",
                minlength: "-->Your password must be at least 5 characters long"
            }
        },
     
        submitHandler: function(form) {
            form.submit();
        }
    });
  });

  </script>
</head>
<body>
  <?php echo $output; ?>

  <!--  The form that will be parsed by jQuery before submit  -->

  <form action="./" method="post" id="register-form" novalidate>


    <div class="label">Name</div><input type="text" id="name" name="name" value="" /><br />
 
    <div class="label">Gender</div><select style="width:155px;" id="gender" name="gender" />
                                      <option selected value="">--select--</option>
                                      <option value="Male">Male</option>
                                      <option value="Female">Female</option>
                                      <option value="Other">Other</option>
                                   </select><br />
                                 
    <div class="label">Address</div><input type="text" id="address" name="address" value="" /><br />
    <div class="label">Email</div><input type="text" id="email" name="email" value="" /><br />
    <div class="label">Username</div><input type="text" id="username" name="username" value="" /><br />
    <div class="label">Password</div><input type="password" id="password" name="password" /><br />
 
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
 
  </form>

</body>
</html>

PHP AJAX Image Upload

1. Add jQuery library
2. Create HTML for image upload form
3. Send file data to PHP via AJAX
4. Write PHP script to upload image

PHP Example to Upload Image

<form id="uploadForm" action="upload.php" method="post">
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>

<script type="text/javascript">
$(document).ready(function (e){
$("#uploadForm").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){}          
});
}));
});
</script>

• Import jQuery library before calling jQuery AJAX handler.
• Find PHP script and css by extracting the source code zip added with this tutorial.

Output

Multiple Ajax Requests with Jquery

Javascript Code

Contains javascript and HTML code. $.when( yahoo(), bing()) is the method to call multiple ajax requests. Here $.when calling two functions called yahoo() and bing() callback objects$.done(yahoo_data, bing_data)

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Yahoo Search API 
var yahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_ID&query='+keyword+'&sources=web&web.count=10';
// Yahoo API
function yahoo()
{
return $.ajax({
type: "GET",
url: yahoo_url,
dataType:"jsonp",
success: function(yahoo_data)
{
}
});
}
// Bing API
function bing()
{
return $.ajax({
type: "GET",
url: bing_url,
dataType:"jsonp",
success: function(bing_data)
{
}
});
}
// Multiple Ajax Requests 
$.when( yahoo(), bing()).done(function(yahoo_data, bing_data)
{
var yahoo=yahoo_data[0].ysearchresponse.resultset_web;
var bing=bing_data[0].SearchResponse.Web.Results;
// Yahoo results
if(yahoo)
{
$("#yahoo_result").html('');
$.each(yahoo, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;
var dispurl=data.dispurl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+dispurl+"</div></div&gt;";
$("#yahoo_result").append(final); // Result
});
}
// Bing results
if(bing)
{
$("#bing_result").html('');
$.each(bing, function(i,data)
{
var title=data.Title;
var dis=data.Description;
var url=data.Url;
var DisplayUrl=data.DisplayUrl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+DisplayUrl+"</div></div&gt;";
$("#bing_result").append(final); // Result
});
}

});

});
});
</script>
// HTML code
<input type="text" class='search_input' />

<div>

<div id="yahoo_result"></div>

<div id="bing_result"></div>

</div>

CSS

#yahoo_result, #bing_result
{
float:left;
width:450px;
}
.search_input
{
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
}

reference : http://www.9lessons.info/