Ajax post request example with jquery and PHP in Hindi

Table of Contents

1 Introduction
2 what is ajax or ajax काम कैसे करता है?
3 AJAX POST request example basic steps

Introduction

हेलो दोस्तों आज हम इस post में ajax post request को jquery and PHP के साथ किस तरह perform करा सकते है! इसका example के साथ समझेंगे!. Ajax post request को समजने के लिए हम एक simple HTML create करेंगे और उस form data को ajax post request से data को database में insert करवाएंगे. तो data को database में submit करने के लिए सभी logic को हम इस post के जरिये समझने की कोसिस करेंगे!.

what is ajax or ajax काम कैसे करता है?

Ajax का full form asynchronous javascript and xml है!. clien-side से data को web page को refresh किये बिना backed-side server से data को fetch display और database में data को insert और update करा सकते है!. ajax request और ajax parameter के बारे में details से जानने के लिए आप इस post में जेक read कर सकते है!. जिसमे ajax parameter के सभी parameter के बारेमे पूरी details से likha है!.

Ajax POST request Basic

$.ajax({
	type:"POST",
        url:"submit_data.php",
        data:{name:"value"},
        success:function(data){
          console.log(data);
        },
        error:function(xhr,status,error){
         console.log(status);
        }
});

AJAX POST request example basic steps

Create HTML form
Include jquery library
Ajax call script
Hanle ajax send data on php file

1.Create HTML form

First step जिसमे हमने एक HTML form को create किया है जिसमे firstname, lastname, Email, mobile, जैसी field को set किया गया है! और इसमें submit button के click पर form data को ajax दयारा database में insert करा जा सकता है!

index.php

<html>
<head>
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <form  action='#' method='post' id="formdata">
  <div class="row">  
    <h2>User Registration</h2>
    <div class="form-group">
      <label for="">first name: <small></small> </label>
      <input type="text" class="form-control required" name='fname' id='fname'>
    </div>
    <div class="form-group">
      <label for="">last name: <small></small> </label>
      <input type="text" class="form-control required" name='lname' id='lname'>
    </div>             
    <div class="form-group">
      <label>Email id: <small></small> </label>
      <input type='text' name='email' id='email' class="form-control required">
    </div>
    <div class="form-group">
      <label>mobile no: <small></small> </label>
      <input type='text' name='mobile' id='mobile' class="form-control required">
    </div>  
    <div class="form-group">
      <label>Gender: <small></small> </label><br>
      <input type='radio' name="gender" id='gender' value='male' class="required"> Male<br>
      <input type='radio' name="gender" id='gender' value='female' class=""> Female
    </div>
    <div class="form-group">
      <input type='submit' name='submit' value='Save' class="btn btn-primary">
      <input type='reset' name='btn_reset' value='Reset' class="btn btn-primary">          
    </div>                             
  </form>
</div>

2.Include jquery library

The second step includes jquery library जिसमे हमें jquery library को HTML के head section में include किया जाता है!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

3.Ajax call script

the third step call ajax, HTML form के submits button के click पर हम script लिखेंगे जो submit button के click पर ajax post request से form data को सेट की हुवी PHP file में send करेगा!.

<script>
	$(document).ready(function() {
		$("#formdata").submit(function() {
			var fname = $("#fname").val();
			var lname = $("#lname").val();
			var email = $("#email").val();
			var mobile = $("#mobile").val();
			var gender = $("#gender").val();

			if(fname ==''||lname ==''||email==''||mobile=='' ||gender=='') {
				alert("Please fill all fields.");
				return false;
			}

			$.ajax({
				type: "POST",
				url: "submit_data.php",
				data: {
					fname: fname,
					lname: lname,
					email: email,
					mobile: mobile, 
					gender:gender
				},
				success: function(data) {
					alert(data);
				},
				error: function(xhr, status, error) {
					console.error(xhr);
				}
			});
			
		});

	});
</script>

4.Hanle ajax send data on php file

ajax के इस्तेमाल से send html form के data url में सेट php file submit_data.php में manage किया जाता है!. ajax से send HTML form data को $_POST method से get किया जाता है!. और JSON और text, string formate में response में भेजा जा सकता है!.

submit_data.php

if (isset( $_POST['fname'] ) ) {

    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];
    $mobile = $_POST['mobile'];
    $gender = $_POST['gender'];
    $created_at = date('Y-m-d h:i:s');
    $updated_at = date('Y-m-d h:i:s');

    $sql = " INSERT INTO
            registration (
              fname, 
              lname, 
              email, 
              mobile, 
              gender, 
              created_at,
              updated_at 
            )
            VALUES (
              '".$fname."', 
              '".$lname."', 
              '".$email."', 
              '".$mobile."', 
              '".$gender."', 
              '".$created_at."',
              '".$updated_at."'
            )";
      //echo $sql;
      if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
      } else {
        echo "Unsuccessfull";
      }

Ajax post request example with jquery and PHP in Hindi
Post Views : 234