Javascript 使用PHP和AJAX返回变量_Javascript_Php_Ajax_Dynamic

Javascript 使用PHP和AJAX返回变量

javascript php ajax dynamic

Javascript 使用PHP和AJAX返回变量,javascript,php,ajax,dynamic,Javascript,Php,Ajax,Dynamic,我正在使用PHP和AJAX在页面中发表文章。php请求第二个return.php。但是我没有得到回报： request.php <script src="jquery-3.3.1.min.js"></script> </head> <script type="text/javascript"> function getnumber(){ var number=document.getElementById("number")

我正在使用PHP和AJAX在页面中发表文章。php请求第二个return.php。但是我没有得到回报：

request.php

<script src="jquery-3.3.1.min.js"></script>
</head>

<script type="text/javascript">  
   function getnumber(){  
    var number=document.getElementById("number").value;  
    alert(number);  
    }

    function post(){
     var numberp=document.getElementById("number").value;  
     $.post('return.php',{postnumber:numberp}, 
     function(data){ 
     var result = $('#numberp').html(data); 
     return result; });
    }
</script>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form> 

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number processed" onclick="post()"/>  
</form>

<script type="text/javascript">
   function getnumber(){
    var number1=document.getElementById("number1").value;
    alert(number1);
    }


    function post(){
     var number2=document.getElementById("number2").value;
     $.post('return.php',{postnumber:number2},
     function(data){
     var result = $('#numberp').html(data);
     console
     return result; });
    }
</script>

<form>A
    Enter No:<input type="text" id="number1" name="number1"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form>
    Enter No:<input type="text" id="number2" name="number2"/><br/>
    <input type="button" value="Get number processed" onclick="post()"/>
</form>
<div id="numberp"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>


函数getnumber（）{
var number=document.getElementById（“number”）.value；
警报（编号）；
}
职能职位（）{
var numberp=document.getElementById（“number”）.value；
$.post（'return.php'，{postnumber:numberp}，
函数（数据）{
var result=$（'#numberp'）.html（数据）；
返回结果；}）；
}
输入否：

输入否：

return.php

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

预期结果是返回的数字。php

您的

post

请求可能失败。添加

错误

回调以报告：

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

$.ajax({
    type: 'POST',
    url: 'return.php',
    data: {postnuber: numberp},
    success: function(res) {
        $('#numberp').html(res);
    },
    error: function(xhr, status, error) {
        alert('error: ' + status);
    }
});

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

您的

post

请求可能失败。添加

错误

回调以报告：

$.ajax({
    type: 'POST',
    url: 'return.php',
    data: {postnuber: numberp},
    success: function(res) {
        $('#numberp').html(res);
    },
    error: function(xhr, status, error) {
        alert('error: ' + status);
    }
});

您的代码似乎是正确的。只是表单元素中有错误。您写了两次“数字”id，所以程序无法获取该值。只需像下面那样替换id

在第一种形式中，更改id

<form>
    Enter No:<input type="text" id="getnumber" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form>


输入否：

您的代码似乎是正确的。只是表单元素中有错误。您写了两次“数字”id，所以程序无法获取该值。只需像下面那样替换id

在第一种形式中，更改id

<form>
    Enter No:<input type="text" id="getnumber" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form>


输入否：

首先，id应该是唯一的。您在两个地方使用了一个id=number，这会产生歧义。请检查此工作代码

request.php

<script src="jquery-3.3.1.min.js"></script>
</head>

<script type="text/javascript">  
   function getnumber(){  
    var number=document.getElementById("number").value;  
    alert(number);  
    }

    function post(){
     var numberp=document.getElementById("number").value;  
     $.post('return.php',{postnumber:numberp}, 
     function(data){ 
     var result = $('#numberp').html(data); 
     return result; });
    }
</script>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form> 

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number processed" onclick="post()"/>  
</form>

<script type="text/javascript">
   function getnumber(){
    var number1=document.getElementById("number1").value;
    alert(number1);
    }


    function post(){
     var number2=document.getElementById("number2").value;
     $.post('return.php',{postnumber:number2},
     function(data){
     var result = $('#numberp').html(data);
     console
     return result; });
    }
</script>

<form>A
    Enter No:<input type="text" id="number1" name="number1"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form>
    Enter No:<input type="text" id="number2" name="number2"/><br/>
    <input type="button" value="Get number processed" onclick="post()"/>
</form>
<div id="numberp"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>


函数getnumber（）{
var number1=document.getElementById（“number1”）.value；
警报（1号）；
}
职能职位（）{
var number2=document.getElementById（“number2”）.value；
$.post（'return.php'，{postnumber:number2}，
功能（数据）{
var result=$（'#numberp'）.html（数据）；
安慰
返回结果；}）；
}
A.
输入否：

输入否：

return.php

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

首先，id应该是唯一的。您在两个地方使用了一个id=number，这会产生歧义。请检查此工作代码

request.php

<script src="jquery-3.3.1.min.js"></script>
</head>

<script type="text/javascript">  
   function getnumber(){  
    var number=document.getElementById("number").value;  
    alert(number);  
    }

    function post(){
     var numberp=document.getElementById("number").value;  
     $.post('return.php',{postnumber:numberp}, 
     function(data){ 
     var result = $('#numberp').html(data); 
     return result; });
    }
</script>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number" onclick="getnumber()"/>  
</form> 

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>  
    <input type="button" value="Get number processed" onclick="post()"/>  
</form>

<script type="text/javascript">
   function getnumber(){
    var number1=document.getElementById("number1").value;
    alert(number1);
    }


    function post(){
     var number2=document.getElementById("number2").value;
     $.post('return.php',{postnumber:number2},
     function(data){
     var result = $('#numberp').html(data);
     console
     return result; });
    }
</script>

<form>A
    Enter No:<input type="text" id="number1" name="number1"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form>
    Enter No:<input type="text" id="number2" name="number2"/><br/>
    <input type="button" value="Get number processed" onclick="post()"/>
</form>
<div id="numberp"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>


函数getnumber（）{
var number1=document.getElementById（“number1”）.value；
警报（1号）；
}
职能职位（）{
var number2=document.getElementById（“number2”）.value；
$.post（'return.php'，{postnumber:number2}，
功能（数据）{
var result=$（'#numberp'）.html（数据）；
安慰
返回结果；}）；
}
A.
输入否：

输入否：

return.php

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

我修改了您的代码，使用

sumbit（）

捕获表单数据。通过这种方式，我们可以序列化数据并将其发送到表单处理器（请注意，

serialize（）

将序列化表单中的所有输入字段，然后由表单处理程序提取正确的值

在return.php中，我修改了您的

$\u POST

变量，以反映输入字段

name

属性值。

name

属性是php查找表单值的方式（我知道）。最后，我将您的输入类型更改为

submit

并在

submit（）中

handler我正在使用

e.preventDefault（）

来防止默认行为并使用AJAX

对于提交按钮，使用

type=“submit”

在语义上更为正确

此外，在表单元素中不需要使用

onclick=“

属性，将JS与HTML分开并处理提交会更干净一些

下面的代码在我的机器上工作

request.php

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<form >
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form id="postForm">
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input  type="submit" value="Get number processed" />
</form>

<div id="numberp"></div>

<script type="text/javascript">

    function getnumber(){
        var number=document.getElementById("number").value;
        alert(number);
    }

    $('#postForm').submit(function(e) {
        e.preventDefault()
        // $(this) refers to the form in this context
        var data = $(this).serialize()
        $.ajax({
            type: 'POST',
            url: './return.php',
            data: data,
            success: function(res) {
                $('#numberp').html(res);
            }
        });
    })

</script>
</body>
</html>


输入否：

输入否：

函数getnumber（）{
var number=document.getElementById（“number”）.value；
警报（编号）；
}
$（'#postForm'）。提交（函数（e）{
e、 预防默认值（）
//$（this）引用此上下文中的表单
var data=$（this）.serialize（）
$.ajax({
键入：“POST”，
url:“./return.php”，
数据：数据，
成功：功能（res）{
$（'#numberp'）.html（res）；
}
});
})

return.php

<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

我修改了您的代码，使用sumbit（）
捕获表单数据。这样，我们可以序列化数据并将其发送到表单处理器（注意，serialize（）
将序列化表单中的所有输入字段，然后由表单处理程序提取正确的值
在return.php中，我修改了您的$\u POST
变量，以反映输入字段name
属性值。name
属性是php查找表单值的方式（我知道）。最后，我将您的输入类型更改为submit
并在submit（）中
handler我正在使用e.preventDefault（）
来防止默认行为并使用AJAX
对于提交按钮，使用type=“submit”
在语义上更为正确
此外，在表单元素中不需要使用onclick=“
属性，将JS与HTML分开并处理提交会更干净一些
下面的代码在我的机器上工作
request.php
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>


<form >
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="Get number" onclick="getnumber()"/>
</form>

<form id="postForm">
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input  type="submit" value="Get number processed" />
</form>

<div id="numberp"></div>

<script type="text/javascript">

    function getnumber(){
        var number=document.getElementById("number").value;
        alert(number);
    }

    $('#postForm').submit(function(e) {
        e.preventDefault()
        // $(this) refers to the form in this context
        var data = $(this).serialize()
        $.ajax({
            type: 'POST',
            url: './return.php',
            data: data,
            success: function(res) {
                $('#numberp').html(res);
            }
        });
    })

</script>
</body>
</html>


输入否：

输入否：

函数getnumber（）{
var number=document.getElementById（“number”）.value；
警报（编号）；
}
$（'#postForm'）。提交（函数（e）{
e、 预防默认值（）
//$（this）引用此上下文中的表单
var data=$（this）.serialize（）
$.ajax({
键入：“POST”，
url:“./return.php”，
数据：数据，
成功：功能（res）{
$（'#numberp'）.html（res）；
}
});
})

return.php
<?php
function returnString() {
$post_number = $_POST['postnumber'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php

function returnString() {
    $post_number = $_POST['postnumber'];
    echo "the name entered ->", $post_number, " <- hier";
}
returnString();
?>

<?php
function returnString() {
$post_number = $_POST['number'];
echo "the name entered ->", $post_number, " <- hier";
}
returnString();

您是否检查了浏览器控制台以查看您的jQuery
帖子是否按预期执行