如何使用html id构建数组，然后在Javascript按钮onClick中将其作为JSON与ajax一起发送？

问题描述：

I am tying to use Post functions to send data from one php file to another, this is how my html code looks like (send.php):

    <!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <p>operator:<input type="text" , id="operator"></p>
    <p>column:<input type="text" , id="columnName"></p>
    <button id="Btn">Click</button>
    <script src="js/jquery.min.js"></script>
    <script src="js/actions.js"></script>
    </body>
    </html>

This is how my JavaScript looks like (actions.js):

    $('#Btn').on('click', function () {
        var array = {'operator': $('#operator'), 'columnName': 
    $('#columnName')};
        $.ajax({
             url: 'receive.php',
             dataType: 'json',
             type: 'post',
             data: array,
             success: function (data) {
                if(data.success){
                     alert(data.operator);
                 } else {
                    alert("error");
                 }
             }

         });
     });

And this is what my receive.php code looks like:

    <?php
    header('Content-type: text/javascript');
    $json = array(
    'operator' => "",
    'columnName' => "",
     );
    if (isset($_POST['operator'],$_POST['columnName'])){
        $operator = $_POST['operator'];
        $columnName = $_POST['columnName'];

        $json['operator'] = $operator;
        $json['columnName'] = $columnName;
     }
     echo json_encode($json);
     ?>

When I fill both fields (column and operator) and I click on the button nothing happens! Any suggestions?

我想使用Post函数将数据从一个php文件发送到另一个php文件，这就是我的html代码的外观喜欢（send.php）： p>

 ＆lt;！DOCTYPE html＆gt; 
＆lt; html＆gt; 
＆lt; head＆gt;＆lt; / head＆gt; 
＆lt; body＆gt;  
＆lt; p＆gt;运算符：＆lt; input type =“text”，id =“operator”＆gt;＆lt; / p＆gt; 
＆lt; p＆gt;列：＆lt; input type =“text”，id =“columnName  “＆gt;＆lt; / p＆gt; 
＆lt; button id =”Btn“＆gt;点击＆lt; / button＆gt; 
＆lt; script src =”js / jquery.min.js“＆gt;＆lt; / script＆gt; 
  ＆lt; script src =“js / actions.js”＆gt;＆lt; / script＆gt; 
＆lt; / body＆gt; 
＆lt; / html＆gt; 
  code>  pre> 
 
  这就是我的JavaScript的样子（actions.js）： p> 
 
 
  $（'＃Btn'）。on（'click'，function（）{
 var array =  {'operator'：$（'＃operator'），'columnName'：
 $（'＃columnName'）}; 
 $ .ajax（{
 url：'receive.php'，
 dataType：'  json'，
 type：'post'，
 data：array，
  success：function（data）{
 if（data.success）{
 alert（data.operator）; 
} else {
 alert（“error”）; 
} 
} 
 
}  ）; 
}）; 
  code>  pre> 
 
 这就是我的receive.php代码： p> 
 
 
   ＆lt;？php 
 header（'Content-type：text / javascript'）; 
 $ json = array（
'operator'=＆gt;  “”，
'columnName'=＆gt;  “”，
）; 
 if（isset（$ _ POST ['operator']，$ _ POST ['columnName']））{
 $ operator = $ _POST ['operator']; 
 $ columnName = $  _POST ['columnName']; 
 
 $ json ['operator'] = $ operator; 
 $ json ['columnName'] = $ columnName; 
} 
 echo json_encode（$ json）; 
？  ＆gt; 
  code>  pre> 
 
 当我填写两个字段（列和操作符）时，我点击按钮没有任何反应！ 有什么建议吗？ p> 
  div>

答

firstly your html inputs are wrong it should be like

<p>operator:<input type="text" id="operator"></p>
<p>column:<input type="text" id="columnName"></p>

should be separated by space only no comma(,).

In JS use

 var array = {'operator': $('#operator').val(), 'columnName': 
$('#columnName').val()};

.val() to read the value of the input field

also some changes in your php code the if() loop where you are checking for isset() only one input can be checked in isset() for another value you need to add && operator and another isset() to check for another input. here is the code

if (isset($_POST['operator']) && isset($_POST['columnName'])){
    $operator = $_POST['operator'];
    $columnName = $_POST['columnName'];

    $json['operator'] = $operator;
    $json['columnName'] = $columnName;
    $json['success'] = TRUE;
 }

如何使用html id构建数组，然后在Javascript按钮onClick中将其作为JSON与ajax一起发送？

相关推荐