Question

我有一个表单，我希望将文本输入字段的值传递给外部页面，而不需要表单提交事件。我想将字段值变成外部页面上的php变量。

这是我到目前为止所拥有的：

<script type="text/javascript">
    jQuery(document).ready(function() {
        $(function() {
            cityField = $('#the_form input[id=city]');
                 $.ajax({

    type: "POST",
    url: "external.php",
    data:{ city: cityfield }, 
    success: function(data){
        console.log(data); 
    }
        });
        });
    });    
</script>

在external.php页面中，我想将city表单字段值声明为php变量

$city = $_POST['city'];

Answer 1

从

开始

jQuery(document).ready(function() {

和

$(function() {

是等价的。 $（function（）应该类似于

$("input[type='button']").click(function() {

这样当你点击按钮时，它会运行ajax请求。

Answer 2

我觉得不能为一次改变发布答案......但是编辑：实际上有一些事情......

<!-- For .click() -->
<a href="#" id="doStuff">Click Me!</a>

<script type="text/javascript">
    // $(function() { // Trigger on page load
    // $('#doStuff').click(function() { // Trigger on a click
    $('#city').blur(function() { // Trigger when the focus on the field is lost (click away, tab to another field, ect)
    // $('#city').change(function() { // Trigger when the fields value changes
        var cityField = $('#city');
        $.ajax({
            type: "POST",
            url: "external.php",
            data:{ 'city': cityField.val() }, 
            success: function(data){
                console.log(data); 
            }
        });
    });
</script>

的变化：

您不需要jQuery(document).ready(function() {})和$(function(){ })。这是同一件事。
聪明地将var置于变量前面。
案例很重要。 cityField和cityfield不是一回事
您只是将整个dom元素发送到外部脚本。（我假设你只想要输入的内容）
此外，您不需要查找＆＃34;输入，其中包含＆＃39; id＆＃39;属性，值为＆＃39; city＆＃39;＆＃34;。只需查看#city

修改
您更新的代码（只需将其放在此处以便于查看）：

<script type="text/javascript"> $('#city').blur(function() { var cityField=$('#city').val(); $.ajax({ type:"post", url:"autosuggest.php", data:{'cityField':cityField }, dataType:"text", complete:function(data, status) { alert("You typed: "+cityField); } }); }); </script>

您的数据应该在autosuggest.php $_POST['cityField'];
中提供
在我看来，在成功函数中进行status检查有点多余最好将success:function(data,...移至complete:function(data,...

Answer 3

我清理了代码，但数据没有发送到external.php。它正在设置但不发布。这是我修改后的代码

  <script type="text/javascript">

       $('#city').blur(function() {

        var cityField = document.querySelector('#city').value;
        $.ajax({
        type: "post",
        url: "external.php",
        data: {'cityField': cityField }, 
        dataType: "text",
        success: function(data, status){
             if(status=="success") {
         alert("You typed: " + cityField);
             }
        }
        });
    });

如何使用jquery将表单输入字段值传递给外部页面

3 个答案: