وب سایت شخصی رحمت حاجی سعدین

می نویسم تا شاید جاودانه شود ...

در اینجا می توانید به آموزش های مفیدی در زمینه های وبلاگ نویسی و برنامه نویسی دسته پیدا کنید

به همراه دست نوشته ها و روزمرگی های خودم:)

هر قالبی رو دیدی فقط کافیه آدرسشو بفرستی و من برات با کمترین هزینه ترجمه کنم برای هر سرویسی اعم از ورپرس،بلاگفا،بلاگ،رزبلاگ،میهن بلاگ و ...

زیر مجموعه گروه راشنو

ajax در jquery

سلام . در خدمتتونم با یه آموزش ساده اما شاید مفید!در این سری میخوایم با هم دیگه یه فرم به سبک ajax‌یا آژاکس بسازیم .من برای ساخت از کتابخانه ajax  در jquery  استفاده کردم

متد GET

$(document).ready(function(){
    $("#btn").click(function(){
        $.get("test.php", { name:"example", lastname:"example" }, function(data, status){
        	alert("Data: " + data + "\nStatus: " + status);
        });
    });
});

متد POST

$(document).ready(function(){
    $("#btn").click(function(){
        $.post("test.php", { name:"example", lastname:"example" }, function(data, status){
        	alert("Data: " + data + "\nStatus: " + status);
        });
    });
});

به طور کلی برای ارسال اطلاعات ما از دو متد GET و POST  استفاده می کنیم . اما دو متد مذکور چه تفاوتی باهم دارند ؟

خیلی ساده بخوام بگم با استفاده از متد GET ‌اطلاعات را به صورت HTTP://EXAMPLE.COM/POST.PHP?ID=3 ارسال میکنیم اما اگر بخواهیم همین داده ها را با متد POST ‌ارسال کنیم HTTP://EXAMPLE.COM/POST.PHP خواهد بود 

  • در کد بالا تعریف کردیم که وقتی روی دکمه با ای دی btn کلیک شد یسری اطلاعات (name:"examole", lastname:"example") بصورت Get  و یا در پایین POST  به فایل test.php ارسال بشه
  • مقادیر برگشتی هم data و status هستند که status وضعیت درخواست رو مشخص میکنه که موفق آمیز بود یا خیر و data هم پاسخ دریافتی از فایل text.php رو در خودش داره.

به مثالی که در همین باره با استفاده از پایگاه داده MYSQL ساختم دقت کنید

  • ابتدا اتصال به پایگاه داده که توصیه می شود از PDO  استفاده شود
<?php
$connection = mysqli_connect('localhost','root','','rah');
if (!$connection) {
	echo 'خطا در برقراری اتصال با پایگاه داده '.mysqli_connect_error;
}
session_start();
?>
  • ساخت فایل index.php (نام دلخواهه)
<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>فرم
   ساده</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style type="text/css">
    .con{
      text-align: center;
    }
  </style>
</head>
<body>
<div class="con">
  <p id="warn">در وارد کردن اطلاعات دقت کنید</p>
<input type="text" id="name" name="fullname" placeholder="نام">
<input type="email" id="email" name="email" placeholder="ایمیل">
<input type="submit" id="submit" name="submit">

</div>
<!--java script-->

<script type="text/javascript">
  $(document).ready(function() {
$("#submit").click(function(){
var fullname = $("#name").val();
  var email = $("#email").val();

function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
};
  if(fullname !== "" && 
    email !== "" , validateEmail(email)){
      
    $.post("test.php" , {fullname:fullname , email:email} , function(data, status){
      if(status === "success"){
        $("#warn").html(data);
      } else {
        $("#warn").html("خطایی رخ داده است");
      }
    });

  } 
  else {
    $("#warn").html("لطفا در وارد کردن اطلاعات دقت کنید");
  }
    return false;


});
  });

</script>
</body>
</html>
  • ساخت فایل test.php  که در بالا قسمت index.php در قسمت جاوااسکریپت گفتم که اطلاعات به این فایل ارسال بشه
<?php
include 'db.php';
?>
<?php
    
		if (empty($_POST['fullname']) && empty($_POST['email'])) {
echo "همه فیلدها باید پر باشند";		
}
	else{
    $fullname = $_POST['fullname'];
		$email = $_POST['email'];
			$query = mysqli_query($connection , "INSERT INTO test (fullname,email) VALUES ('$fullname' ,'$email')");
		if ($query) {
			echo "اطلاعات با موفقیت ثبت  شد";
		}else{
			echo "خطا";
		}	

		
	}
?>
  • یادتون نره کتابخونه jquery  رو فراخونی کنید
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

و در پایان هم بگم واقعا برنامه نویسی برام کار لذت بخشی است . پیشنهاد میکنم اگه بش علاقه مند هستین پیگر باشین

یا حق

تعداد نظرات:(۰)

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی