如何使用ajax将值传递给php脚本?

时间:2016-07-21 05:13:28

标签: php jquery ajax

我编写了一个代码,使用ajax将输入字段的值传递给php脚本,但它无法正常工作。任何人都可以建议如何纠正这个代码?我想在php文件中显示通过ajax传递的值。

ex.php

<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){


$("input").change(function(){

  var fname = $("#fname").val();
   var lname = $("#lname").val();

   $.ajax({
   method: "POST",
   url: "ex.php", // path to php file
    data: { start_date: fname, end_date: lname } // send required data here
  })
  .done(function( msg ) {

  }); 


  });

  });

 </script>
 </head>
 <body>
 <form action="#" method="post" name="form1">
 <input type="text" name="fname" id="fname"/>
 <input type="text" name="lname" id="lname"/>
 </form>
 </body>
 </html>

4 个答案:

答案 0 :(得分:1)

2016-07-21T09:34:57.266+0430 E QUERY    [thread1] ReferenceError: reports is not defined :@(shell):1:1

答案 1 :(得分:0)

为化妆添加元素

<span id="idOfSomeElementYouWantToUse"></span>

并在你的回调中设置了它的文字。

.done(function( msg ) {
    $("#idOfSomeElementYouWantToUse").text(msg);
});

答案 2 :(得分:0)

在页面中添加div并使用html()附加来自ajax请求的数据

 <body>
 <form action="#" method="post" name="form1">
 <input type="text" name="fname" id="fname"/>
 <input type="text" name="lname" id="lname"/>
 </form>
 <div class="ajax-result"></div>
 </body>

JS:

$("input").change(function(){

  var fname = $("#fname").val();
   var lname = $("#lname").val();

   $.ajax({
    method: "POST",
    url: "other_file.php", // path to php file
    data: { start_date: fname, end_date: lname }, // send required data here
    success:function(data){
     $(',ajax-result').htm(data);
     }
  });

注意:从我可以告诉你的是ajaxing到同一页面,我强烈建议你用你的逻辑创建一个新的php文件(other_file.php)

答案 3 :(得分:0)

从我上面的评论中我可以理解,你想要将文本框值插入数据库,为此你不想在textChange事件上调用ajax,因为那时不会出现所有值,我建议将提交按钮添加到表单并在表单提交上调用ajax。

这是主文件:

ajax_ex.php (您应该根据您的要求命名)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
  <form id="frmInsert" method="post" name="form1">
    <input type="text" name="fname" id="fname"/>
    <input type="text" name="lname" id="lname"/>
    <input type="submit" value="Insert" />
  </form>
  <div id="msg">

  </div>
</body>

<!-- You should put javascript at bottom -->
<script   src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript">

  $("#frmInsert").submit(function(e){
    var fname = $("#fname").val();
    var lname = $("#lname").val();

    $.ajax({
    method: "POST",
    url: "insert.php", // path to php file
      data: { start_date: fname, end_date: lname } // send required data here
    })
    .done(function( msg ) {
      msg = $.trim(msg);
      if (msg == 'true') {
        $('#msg').html("Data is inserted successfully");
      }else {
        $('#msg').html("Data insertion failed");
      }
    });

    e.preventDefault(); 
  });

你不应该在ajax中调用相同的文件,我建议你创建将在ajax中调用的单个文件,这个文件将处理所有的后端处理。

<强> insert.php

<?php

//Check if post data is available (You should also check for particular attribute if it is available)
if (!empty($_POST)) {
  $temp = $_POST['start_date'];
  $name = $_POST['end_date'];

  //Insert Data into database
  // Your code
  $result = 'true'; //check for operation if it is success and store it in result

  //Echo result so you can check if insert is success of not in your ajax callback.
  echo $result;
}

&GT;