Question

我搜索过StackOverFlow，但没找到我要找的东西，所以我发布了我想问你的内容。

我是PHP世界的新来者我是如何开始编写一个脚本来获取数据并在WAP界面上显示那部分是好的我的问题出现在我正在编写的部分中数据插入页面或管理员页面。我已经完成了所有工作，但我很想知道如何使用AJAX来显示一条消息，而不是去特定的处理页面。

Process Page，

<?php


include ('connect.php');

$data = ("SELECT * FROM poiinfo");

$poiName = $_REQUEST['Name'];
$poiDes = $_REQUEST['Descrip'];
$poiCon = $_REQUEST['ConInfo'];
/*$poiImg = $_REQUEST['Image']; */

$dbData = "INSERT INTO poiinfo(`Name`, `Des.`, `Contact`) VALUES ('$poiName','$poiDes','$poiCon')";

$putData = mysql_query($dbData);

if ($putData){
echo "Data inserted";
}else {
echo "Not Done";
}
?>

我可以知道如何使用AJAX来获取消息。

我已经使用了你们给我的代码示例，但我仍然没有完成工作，请你能帮助我找到我做错的事。

我的表格，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<script type="text/javascript">
$(document).ready(function(){
$("#save_data").click(function(){
var name  = document.getElementById("Name");
var desc = document.getElementById("Descrip");
var con = document.getElementById("ConInfo");

var dataString = 'Name='+name'&Descrip='+desc'&ConInfo='con;
$.ajax({
  type:'POST',
  data:dataString,
  url:'addpoipro.php',
  success:function(data){
   if(data="Data inserted") {
      alert("Insertion Success");
    } else {
      alert("Not Inserted"); 
    }
    } 
   });
   });
   });
   </script>

   <title>AddPOI</title>
   </head>

   <body>
   <form method="post" enctype="multipart/form-data" name="form1" id="form1">
   <p>
   <label for="poiid">ID :</label>
   <input type="text" name="poiid" id="poiid" readonly="readonly" style="width:70px;" value="<?php echo $tId; ?>" />
   </p>
   <p>
   <label for="Name">POI Name :</label>

   <input type="text" name="Name" id="Name" />
   </p>
   <p>
   <label for="Descrip" style="alignment-adjust:middle">POI Description :</label>
   <textarea name="Descrip" id="Descrip" cols="45" rows="5"></textarea>
   </p>
   <p>
   <label for="ConInfo">Contact Infomation :</label>
   <textarea name="ConInfo" id="ConInfo" cols="45" rows="5"></textarea>
   </p>
   <p>
   <label for="Img">POI Image :</label>
   <!--<input type="file" name="Image" id="Image" /> -->
   </p>
   <p>&nbsp;</p>
   <p>
   <div align="center">
   <input type="button" name="Submit" id="save_data" value="Submit" style="width:100px;" />
   <input type="reset" name="reset" id="reset" value="Rest Data" style="width:100px;" />
   </div>
   </p>
   </form>
   </body>
   </html>

Above4是我的表格，process.php就在那之前请帮助我谢谢。

Answer 1

使用jQuery的$.ajax：

的示例

$.ajax({
  url: "process.php",
  type: "POST",
  data : { Name : 'John', Descrip : 'some description..', ConInfo : 'some info...' },
  success : function(data){
      if(data == "Data inserted")
      {
          console.log("Success!");
      }
      else
      {
          console.log("fail!");
      }
  }
});

Answer 2

这是另一种不使用jquery的解决方案。

<强>的index.html

<head>
<script type="text/javascript" src="test.js"></script>

</head>
<body>
<!-- reply from process.php is shown in this div -->
<div id=message></div>
<!-- click to send data -->
<a href="#" onclick="sendData('John','student','no more info')"> click here </a> 
</body>
</html>

<强> test.js

function sendData(Name,description,info) {
        var ajaxRequest;  // The variable that makes Ajax possible!

        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
            }
        catch (e)
            {
            // Internet Explorer Browsers
                try
                    {
                    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                catch (e)
                    {
                        try
                            {
                            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                            }
                        catch (e)
                            {
                            // Something went wrong
                            alert("Your browser broke!");
                            return false;
                            }
                    }
            }
        // Create a function that will receive data sent from the server

        ajaxRequest.onreadystatechange = function()
            {
                    var ajaxDisplay = document.getElementById('message');
            if(ajaxRequest.readyState == 4)
                { ajaxDisplay.innerHTML = ajaxRequest.responseText;}
                    else { document.getElementById('message').innerHTML="<span style=\"color:green;\">Loading..</span>"; }
                     }
        var url="process.php?name="+Name+"&Descrip="+description+"&ConInfo="+info;
        ajaxRequest.open("POST", url, true);
        ajaxRequest.send(null);
        }

Answer 3

你也可以这样做。

您的HTML

<label>Name</labe><input type="text" id="name" name="full_name" value="" />
<label>Address</labe><input type="text" id="addr" name="addr" value="" />
<input type="button" name="save" id="save_data" value="Save" />

添加jQuery之后在头部分中的

执行类似这样的操作

<script>
 $(document).ready(function(){
  $("#save_data").click(function(){
    var name  = $("#name").val();
    var addr = $("#addr").val();

    var dataString = 'name='+name'&address='+address;
    $.ajax({
      type:'POST',
      data:dataString,
      url:'process.php',
      success:function(data){
       if(data="inserted") {
          alert("Insertion Success");
        } else {
          alert("Not Inserted"); 
        }
     } 
   });
  });
});
</script>

“process.php page”

$name = $_POST['name'];
$address = $_POST['address'];

// DO YOUR INSERT QUERY
$insert_query = mysql_query("INSERT QUERY GOES HERE");
if(// CHECK FOR AFFECTED ROWS) {
     echo "inserted";
} else {
     echo "not";
}

使用ajax在数据插入数据库时显示消息

3 个答案:

使用ajax在数据插入数据库时​​显示消息

3 个答案:

使用ajax在数据插入数据库时显示消息