Angularjs和jQuery不是我的正常简单的形式工作 [英] Angularjs and jquery not working in my regular simple form
本文介绍了Angularjs和jQuery不是我的正常简单的形式工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我学习Angularjs和我创建简单的表格。其实我PHP开发人员，所以我preferred使用PHP作为服务器端脚本语言。我无法将数据提交给服务器，我试过很多方法，但这些都是非常复杂的，如果我试图在标准方法Angularjs不能正常工作，请检查我的code，并给我最好的方法与angularjs工作，jQuery的和PHP。帮帮我！
\r
\r\r
\r angular.module（mainModule，[]）\r
.controller（mainController功能（$范围，$ HTTP）{\r
$ scope.person = {};\r
$ scope.serverResponse ='';\r
\r
$ scope.submitData =功能（）{\r
无功配置= {\r
标题：{\r
内容类型：应用程序/ x-WWW的形式urlen codeD\r
}\r
};\r
\r
$ http.post（server.php，$ scope.person，配置）\r
.success（功能（数据，状态，头，配置）{\r
$ scope.serverResponse =数据;\r
}）\r
.error（功能（数据，状态，头，配置）{\r
$ scope.serverResponse =提交错误;\r
}）;\r
};\r
}）; \r
＆LT; PHP\r
如果（使用isset（$ _ POST [人））\r
{\r
// AJAX表单提交\r
$ =人json_de code（$ _ GET [人]）;\r
\r
$结果= json_en code（阵列（\r
receivedName=＆GT; $＆人 - GT;的名字，\r
receivedEmail=＆GT; $＆人 - GT;电子邮件））;\r
}其他\r
{\r
$结果=无效请求数据;\r
}\r
\r
回声$结果;\r
\r
？＆GT; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG-应用=mainModule＆GT;\r
＆LT; DIV NG控制器=mainController＆GT;\r
＆LT;表格名称=personForm1NOVALIDATE NG-提交=submitData（）＆GT;\r
＆LT;标签=名＆gt;首先名称：LT; /标签＆gt;\r
＆LT;输入ID =名称类型=文本名称=名字吴模型=person.name要求/＆GT;\r
＆LT; BR /＆GT;\r
{{person.name}}\r
＆LT; BR /＆GT;\r
＆LT;标签=电子邮件＆GT;电子邮件：LT; /标签＆gt;\r
＆LT;输入ID =电子邮件类型=文本名称=电子邮件NG模型=person.email数据香菜-TYPE =电子邮件要求/＆GT;\r
＆LT; BR /＆GT;\r
＆LT; BR /＆GT;\r
＆LT;按钮式=提交＆GT;提交＆LT; /按钮＆GT;\r
＆LT; /表及GT;\r
＆LT; BR /＆GT;\r
＆LT; DIV＆GT;\r
{{$ scope.serverResponse}}\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;！ - ＆LT;脚本类型=文/ JavaScript的SRC =脚本/ parsley.js＆GT;＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT - →;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
解决方案
更新，这是刚PHP和Apache测试code - 和它的作品。我也改变您的 server.php 文件象下面这样。该文件是基于AngularJS中心的服务器调用示例创建。同一消息来源被用来创建的 mainController.js $ http.post（...）方法调用，使其成功地张贴数据到服务器。
屏幕截图（提交后）
server.php
＆LT; PHP
如果（$ _ SERVER [REQUEST_METHOD] ===POST）
{ $结果=POST请求接受！ 如果（使用isset（$ _ GET [名称]））
{
$结果=\\ n名称=。 $ _GET [名称];
} 如果（使用isset（$ _ GET [电子邮件]））
{
$结果=\\ nemail =。 $ _GET [电子邮件];
} 如果（使用isset（$ HTTP_RAW_POST_DATA））
{
$结果=\\ DATA nPOST。 $ HTTP_RAW_POST_DATA;
} 回声$结果;
}？＆GT;
personForm.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT; ＆LT; /头＆GT;
＆LT;机身NG-应用=mainModule＆GT;
＆LT; DIV NG控制器=mainController＆GT;
＆LT;表格名称=personForm1验证NG-提交=提交（）＆GT;
＆LT;标签=名＆gt;首先名称：LT; /标签＆gt;
＆LT;输入ID =名称类型=文本名称=名字吴模型=person.name要求/＆GT;
＆LT; BR /＆GT;
{{person.name}}
＆LT; BR /＆GT;
＆LT;标签=电子邮件＆GT;电子邮件：LT; /标签＆gt;
＆LT;输入ID =电子邮件类型=文本名称=电子邮件NG模型=person.email要求/＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
＆LT;按钮式=提交＆GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT;
＆LT; BR /＆GT;
＆LT; DIV＆GT;
{{serverResponse}}
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =mainController.js＆GT;＆下; /脚本＆GT;
＆LT;！ - ＆LT;脚本类型=文/ JavaScript的SRC =脚本/ parsley.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT - →;
＆LT; /身体GT;＆LT; / HTML＆GT;
mainController.js
angular.module（mainModule，[]）
.controller（mainController功能（$范围，$ HTTP）
{
$ scope.person = {}; $ scope.serverResponse =; $ scope.submit =功能（）
{ 的console.log（形式提交）; VAR PARAMS = {
名称：$ scope.person.name，
电子邮件：$ scope.person.email
}; 无功配置= {
params：一个PARAMS
}; $ http.post（server.php，$ scope.person，配置）
.success（功能（数据，状态，头，配置）
{
的console.log（数据+数据+状态+状态+头+ +头，配置+配置）;
$ scope.serverResponse =数据;
的console.log（$ scope.serverResponse）;
}）
.error（功能（数据，状态，头，配置）
{的console.log（错误）;
$ scope.serverResponse =提交错误;
}）;
};
}）; // JavaScript源$ C $ C
替代方式，用JSON处理：
server_json.php
＆LT; PHP
如果（$ _ SERVER [REQUEST_METHOD] ===POST）
{
/ * code来源：http://stackoverflow.com/a/22852178/2048391 * /
$数据=阵列（）;
$ JSON =的file_get_contents（'PHP：//输入'）; //从原POST数据读取JSON 如果（！空（$ JSON））{
$数据= json_de code（$ JSON，真正的）; //德code
} 的print_r（$数据）; } ？＆GT;
屏幕截图（提交后）
I am learning Angularjs and I created simple form. Actually i am PHP developer so i preferred to use php as a server side scripting language. I am unable to submit the data to server, i tried so many methods but those are very complex if i am trying in standard method Angularjs is not working please check my code, and give me best method to work with angularjs, jquery and php. help me!
angular.module("mainModule", [])
.controller("mainController", function($scope, $http) {
$scope.person = {};
$scope.serverResponse = '';
$scope.submitData = function() {
var config = {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
};
$http.post("server.php", $scope.person, config)
.success(function(data, status, headers, config) {
$scope.serverResponse = data;
})
.error(function(data, status, headers, config) {
$scope.serverResponse = "SUBMIT ERROR";
});
};
});
<?php
if (isset($_POST["person"]))
{
// AJAX form submission
$person = json_decode($_GET["person"]);
$result = json_encode(array(
"receivedName" => $person->name,
"receivedEmail" => $person->email));
} else
{
$result = "INVALID REQUEST DATA";
}
echo $result;
?>
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<form name="personForm1" novalidate ng-submit="submitData()">
<label for="name">First name:</label>
<input id="name" type="text" name="name" ng-model="person.name" required />
<br />
{{person.name}}
<br />
<label for="email">email:</label>
<input id="email" type="text" name="email" ng-model="person.email" data-parsley-type="email" required />
<br />
<br />
<button type="submit">Submit</button>
</form>
<br />
<div>
{{$scope.serverResponse}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!--<script type="text/javascript" src="script/parsley.js"></script>
<script src="script.js"></script>-->
</body>
</html>
解决方案
Updated, this is code that was just tested with php and Apache - and it works. I also changed your server.php file like below. The file was created based on AngularJS Hub's Server Calls sample. The same source was used to create mainController.js' $http.post(...) method call so that it successfully posts data to the server.
Screenshot (after submit)
server.php
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST")
{
$result = "POST request received!";
if (isset($_GET["name"]))
{
$result .= "\nname = " . $_GET["name"];
}
if (isset($_GET["email"]))
{
$result .= "\nemail = " . $_GET["email"];
}
if (isset($HTTP_RAW_POST_DATA))
{
$result .= "\nPOST DATA: " . $HTTP_RAW_POST_DATA;
}
echo $result;
}
?>
personForm.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="mainModule">
<div ng-controller="mainController">
<form name="personForm1" validate ng-submit="submit()">
<label for="name">First name:</label>
<input id="name" type="text" name="name" ng-model="person.name" required />
<br />
{{person.name}}
<br />
<label for="email">email:</label>
<input id="email" type="text" name="email" ng-model="person.email" required />
<br />
<br />
<button type="submit">Submit</button>
</form>
<br />
<div>
{{serverResponse}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="mainController.js"></script>
<!--<script type="text/javascript" src="script/parsley.js"></script>
<script src="script.js"></script>-->
</body>
</html>
mainController.js
angular.module("mainModule", [])
.controller("mainController", function ($scope, $http)
{
$scope.person = {};
$scope.serverResponse = "";
$scope.submit = function ()
{
console.log("form submit");
var params = {
name: $scope.person.name,
email: $scope.person.email
};
var config = {
params: params
};
$http.post("server.php", $scope.person, config)
.success(function (data, status, headers, config)
{
console.log("data " + data + ", status "+ status + ", headers "+ headers + ", config " + config);
$scope.serverResponse = data;
console.log($scope.serverResponse);
})
.error(function (data, status, headers, config)
{ console.log("error");
$scope.serverResponse = "SUBMIT ERROR";
});
};
});// JavaScript source code
Alternative way, with JSON handling:
server_json.php
<?php
if ($_SERVER["REQUEST_METHOD"] === "POST")
{
/* code source: http://stackoverflow.com/a/22852178/2048391 */
$data = array();
$json = file_get_contents('php://input'); // read JSON from raw POST data
if (!empty($json)) {
$data = json_decode($json, true); // decode
}
print_r($data);
}
?>
Screenshot (after submit)
这篇关于Angularjs和jQuery不是我的正常简单的形式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
