[英]sending HTML-form with ajax and jQuery to PHP
I'm trying to make first steps with JavaScript using the jQuery-library and Ajax. 我正在尝试使用jQuery-library和Ajax使用JavaScript迈出第一步。 I want to read a HTML-form and recieve the users input in a PHP file. 我想阅读HTML表单,并在PHP文件中接收用户输入。 The following is a JavaScript function to sends the form via Ajax to the webserver: 以下是一个JavaScript函数,用于通过Ajax将表单发送到Web服务器:
function get_post( ) {
$.ajax({
type : "post",
url : "ajax.php",
data : $("form").serialize(),
cache : false,
success: function( data ) {
console.log( data );
}
});
}; };
In the console.log the right input data are shown and also with the PHP-debug-output, which is programmed in ajax.php. 在console.log中,显示了正确的输入数据,并显示了PHP-debug-output,该输出在ajax.php中进行了编程。 console.log(data) gives: console.log(data)提供:
Parameter: temperature 参数:温度
Sensorknoten: Node1 传感器结:Node1
Start: 2017-04-20 14:15 开始:2017-04-20 14:15
End: 2017-04-06 06:30 结束于:2017-04-06 06:30
which is obviously correct. 这显然是正确的。
Echo ing the PHP-variables in the Browser gives: 在浏览器中回显PHP变量将得到:
Parameter: FIELD EMPTY Sensorknoten: FIELD EMPTY Start: FIELD EMPTY End: FIELD EMPTY 参数:FIELD EMPTY传感器结:FIELD EMPTY开始:FIELD EMPTY结束:FIELD EMPTY
ajax.php calls a class named UsersInput, which should retrieves the userinput with the gloabal $_POST. ajax.php调用一个名为UsersInput的类,该类应使用通用$ _POST检索用户输入。 The different $_POST-methods in UserInput are similair to this UserInput中的不同$ _POST方法与此类似
public function getNodes() {
$location = isset($_POST['location'])?$_POST['location']:"FIELD EMPTY";
return $location;
}
ajax.php: ajax.php:
<?php
require_once 'includes/autoload.php';
/*
* get users input from HTML-Form
* @param object: $userIn
*/
$userIn = new UserInput();
$param = $userIn->getParams();
$node = $userIn->getNodes();
$start = $userIn->getStartdate();
$end = $userIn->getEnddate();
//debug output
echo "Parameter: $param";
echo"<br />";
echo "Sensorknoten: $node";
echo"<br />";
echo "Start: $start";
echo"<br />";
echo "End: $end";
echo"<br />";
?>
This is the HTML-form: 这是HTML形式:
<form>
<input type="hidden" name="nodeformsend" value="true">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Welcome!
<small>Now, you are able to visualize your Data</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Sensor Monitoring</a>
</li>
<li class="active">Visualize Data</li>
</ol>
</div>
</div>
<!-- table to select different Nodes -->
<div class="row">
<div class="col-md-3">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3 class="panel-title">Select Wireless Sensor Sodes</h3>
</div>
<div class="col-md">
<select class="form-control" id="location" name="location">
<?php for($i = 1; $i < 13; $i++) : ?>
<option name="location[<?php echo $i ?>]" value="Node<?php echo $i ?>">Wireless Senssor Node <?php echo $i ?></option>
<?php endfor; ?>
</select>
</div>
</div>
</div>
<!-- table to select different parameters -->
<div class="col-md-3">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3 class="panel-title">Select Parameteres</h3>
</div>
<div class="col-md">
<select class="form-control" id="parameter" name="parameter">
<option name="parameter[0]" value="temperature">Temperature</option>
<option name="parameter[1]" value="humidity">Humidity</option>
<option name="parameter[2]" value="pressure">Pressure</option>
</select>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3 class="panel-title">Begin of Timestamp</h3>
</div>
<div class="input-group date" id="datetime-start" data-date-format="dd-mm-yyyy" >
<div class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</div>
<input class="form-control" name="datetime-start" type="text" placeholder="YYYY-MM-DD HH:MM">
</div>
</div>
</div>
<!-- table to select Timestamps-->
<div class="col-md-3">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3 class="panel-title">End of Timestamp</h3>
</div>
<div class="input-group date" id="datetime-end" data-date-format="dd-mm-yyyy" >
<div class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</div>
<input class="form-control" name="datetime-end" type="text" placeholder="YYYY-MM-DD HH:MM">
</div>
</div>
</div>
</div>
<input id="submit" type="button" value="submit" onclick="get_post();">
EDIT 编辑
Yes, of course! 当然是! Here it is: 这里是:
<?php
//__________This class parse the usersinput UI__________
class UserInput{
/**
* get Nodes from UsersInput
* $location = Node[i]
*/
public function getNodes() {
$location ='';
$location = isset($_POST['location'])?$_POST['location']:"FIELD EMPTY"; //load the inputs of user to a variable as an array
return $location;
}
/**
* get Nodes from UI
* $parameter = Temperature, Humidty, Pressure
*/
public function getParams() {
$parameter = isset($_POST['parameter'])?$_POST['parameter']:"FIELD EMPTY";
return $parameter;
}
/**
* get Nodes from UI
* $start = 'YYYY-mm-DD hh:ii:ss < $end
*/
public function getStartdate() {
$start = isset($_POST['datetime-start'])?$_POST['datetime-start']:"FIELD EMPTY";
return $start;
}
/**
* get Nodes from UI
* $end = 'YYYY-mm-DD hh:ii:ss
*/
public function getEnddate() {
$end = isset($_POST['datetime-end'])?$_POST['datetime-end']:"FIELD EMPTY";
return $end;
}
/**
* get Nodes from UI
*/
}
Try using the $_POST as a parameter and not a global variable. 尝试使用$ _POST作为参数而不是全局变量。 The value of the $_POST has changed. $ _POST的值已更改。 Alternatively since you have a class, you can take advantage of Object oriented programming: Now we add a construct function and when instantiating the class, we pass the $_POST
as a parameter. 另外,由于您有一个类,因此可以利用面向对象的编程的优势:现在,我们添加了一个构造函数,并在实例化该类时将$_POST
作为参数传递。 This way we do not have to worry about accessing from $_POST
这样,我们不必担心从$_POST
访问
Also if you are going to save these details to your database, please properly sanitize the input strings 另外,如果要将这些详细信息保存到数据库中,请正确清理输入字符串
$userIn = new UserInput($_POST);
$param = $userIn->getParams();
$node = $userIn->getNodes();
$start = $userIn->getStartdate();
$end = $userIn->getEnddate();
And in your class 在你的课上
<?php
//__________This class parse the usersinput UI__________
class UserInput{
var $variables = array();
public function __construct($posted_variables){
try{
if(is_array($posted_variables) && isset($posted_variables)){
$this->variables = $posted_variables;
}else{
throw new Exception('Post is empty'.var_dump($variables));
}
}catch(Exception $ex){
echo $ex->getTraceAsString();
}
}
/**
* get Nodes from UsersInput
* $location = Node[i]
*/
public function getNodes() {
$location ='';
$location = isset($this->variables['location'])?$this->variables['location']:"FIELD EMPTY"; //load the inputs of user to a variable as an array
return $location;
}
/**
* get Nodes from UI
* $parameter = Temperature, Humidty, Pressure
*/
public function getParams() {
//example:
$parameter = isset($this->variables['parameter'])?$this->variables['parameter']:"FIELD EMPTY";
return $parameter;
}
/**
* get Nodes from UI
* $start = 'YYYY-mm-DD hh:ii:ss < $end
*/
public function getStartdate() {
$start = isset($this->variables['datetime-start'])?$this->variables['datetime-start']:"FIELD EMPTY";
return $start;
}
/**
* get Nodes from UI
* $end = 'YYYY-mm-DD hh:ii:ss
*/
public function getEnddate() {
$end = isset($this->variables['datetime-end'])?$this->variables['datetime-end']:"FIELD EMPTY";
return $end;
}
/**
* get Nodes from UI
*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.