如何使用ajax和php异步获取数据_Php_Jquery_Ajax

如何使用ajax和php异步获取数据

php jquery ajax

如何使用ajax和php异步获取数据,php,jquery,ajax,Php,Jquery,Ajax,我是阿贾克斯新手。我想显示在另一个div元素的输入中输入的文本。下图所示：这是我的密码： <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <label for="bar"&g

我是阿贾克斯新手。我想显示在另一个div元素的输入中输入的文本。下图所示：

这是我的密码：

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

    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />   


<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>

<script >
 /* Get from elements values */
 var values = $(this).serialize();

 $.ajax({
        url: "testajax.php",
        type: "post",
        async:true,
        data: values ,
        success: function (response) {                     

        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });
</script>

</body>
</html>


输入文本
文本输出：
/*从元素值中获取*/
var values=$（this.serialize（）；
$.ajax({
url:“testajax.php”，
类型：“post”，
async:true，
数据：价值观，
成功：功能（响应）{
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});

以下是php代码：

<?php
  $bar = $_POST['bar']
?>

请帮助我解决此问题，并尽可能减少代码。谢谢

客户端


输入文本
文本输出：
Json对象
变量值=$（“形式”）.serialize（）；
$（“表格”）。在“提交”上，功能（事件）{
event.preventDefault（）；
var values=$（this.serialize（）；
$.ajax({
url:“testajax.php”，
类型：“post”，
async:true，
数据：价值观，
数据类型：“json”，
contentType:'application/x-www-form-urlencoded；charset=UTF-8'，
成功：函数（json）{
$（'#result'）.html（（json.content）？（json.content）：'？）；
$（'#result'）.prop（'title'，json.title）；
$（'#jsonstring'）.html（'Json对象：'+Json.stringify（Json））；
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});
});

服务器端

客户端

输入文本
文本输出：
Json对象
变量值=$（“形式”）.serialize（）；
$（“表格”）。在“提交”上，功能（事件）{
event.preventDefault（）；
var values=$（this.serialize（）；
$.ajax({
url:“testajax.php”，
类型：“post”，
async:true，
数据：价值观，
数据类型：“json”，
contentType:'application/x-www-form-urlencoded；charset=UTF-8'，
成功：函数（json）{
$（'#result'）.html（（json.content）？（json.content）：'？）；
$（'#result'）.prop（'title'，json.title）；
$（'#jsonstring'）.html（'Json对象：'+Json.stringify（Json））；
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});
});

服务器端

输入文本
文本输出：
/*从元素值中获取*/
$（“#提交”）。在（“单击”，函数（）{
var values=$（this.serialize（）；
$.ajax({
url:“testajax.php”，
类型：“post”，
async:true，
数据：价值观，
成功：功能（响应）{
$（'#result'）.html（（响应）；
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});
});

输入文本
文本输出：
/*从元素值中获取*/
$（“#提交”）。在（“单击”，函数（）{
var values=$（this.serialize（）；
$.ajax({
url:“testajax.php”，
类型：“post”，
async:true，
数据：价值观，
成功：功能（响应）{
$（'#result'）.html（（响应）；
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});
});
谢谢@hherger.showing console ReferenceError:未定义值。如果没有json，是否可能。（除其他外）您通常会序列化表单。我已修改答案，添加表单标记和提交按钮。Javascript代码也已修改，以反映表单定义。注意：代码尚未测试！“如果没有json，是否可能…”。是的，数据类型属性将是html，PHP脚本将回显html代码，此html代码将直接分配给success函数中的$（“#result”）…中。Thank@hherger.showing console ReferenceError:未定义值。如果没有json，是否可能。（除其他外）您通常会序列化表单。我已经修改了答案，添加了表单标签和提交按钮。Javascript代码也已经修改，以反映表单定义。注意：代码还没有经过测试！“如果没有json，这是可能的。。。“。是的，数据类型属性将是html，PHP脚本将回显html代码，并且此html代码将直接分配给success函数中的$（'#result'）…中。您能否描述您的答案，或者显示一些contextAjax响应将放在id=“result”的div中？”.您能描述一下您的答案吗？也许可以显示一些上下文ajax响应将出现在id=“result”的div中。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>    
</head>
<body>
<form>
    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />   
    <input type="submit" value="Go">
</form>

<!-- The result of the search will be rendered inside this div -->
<div id="result">Text Output: </div>
<!-- For testing purposes comes here the JSON object (stringified) -->
<div id="jsonstring" style="font-family:monospace;">Json object</div>

<script type="text/javascript">
var values = $("form").serialize();

$("form").on("submit", function( event ) {
    event.preventDefault();
    var values = $( this ).serialize();

    $.ajax({
        url: "testajax.php",
        type: "post",
        async: true,
        data: values,
        dataType: 'json',
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        success: function(json) {
            $('#result').html((json.content) ? (json.content) : '???');
            $('#result').prop('title', json.title);
            $('#jsonstring').html('Json object: '+JSON.stringify(json));
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

});

</script>

</body>
</html>    

<?php
    $bar = (isset($_POST['bar'])) ? $_POST['bar'] : '';
    $result = array(
        'title' => 'This is the result from an AJAX call',
        'content' => 'This is the result: <span style="color:red;">' . $bar . '</span>',
    );
    echo json_encode($result);
?>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
 <form name="form">
    <label for="bar">Enter Text</label>
    <input id="bar" name="bar" type="text" value="" />  
    <input type="submit" id="submit" value="click"  >
  </form>

 <!-- The result of the search will be rendered inside this div -->
    <div id="result">Text Output: </div>

<script >
 /* Get from elements values */
 $("#submit").on("click", function(){
 var values = $(this).serialize();

 $.ajax({
    url: "testajax.php",
    type: "post",
    async:true,
    data: values ,
    success: function (response) {                     
    $('#result').html((response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
  });

 });
</script>

</body>
</html>