使用 jquery Ajax 获取控制器的输入值答案

【问题标题】：Get input value to controller using jquery Ajax使用 jquery Ajax 获取控制器的输入值
【发布时间】：2016-01-14 20:30:04
【问题描述】：

这是一个表格

<form>
    <input id="amount"  type="text" placeholder="Amount in &euro;"  name="writtenamount"/>
    <button class="btn btn-lg" type="submit" id="btn1" >BTN1</button> 
    <button class="btn btn-lg" type="submit" id="btn2">BTN2</button>
</form>

其中有一个输入字段，我需要做的就是使用 jquery ajax 将值推送到控制器。但我猜它写错了。

<script type="text/javascript">
$('#btn1').click(function() { 
   $.ajax({
     url: 'moneyexchange/invest_first_page',
     type: 'POST',
     data: { 
        writtenamount: $("#amount").val()
     },
     success: function (result) {
        alert(result);
     }
  });  

});

</script>

我这里有一个控制器，

 public function invest_first_page(){
        $this->load->helper('form');
        $this->load->library('form_validation');
        $this->load->view('header');
        $userProvidedAmount = $this->input->post("writtenamount");
        $data =  array(
        'userProvidedAmount' => $userProvidedAmount
         );
        $this->load->view("firstPage", $data);
        $this->load->view('footer');
}

目前我无法将输入中的值发送到控制器，因此需要帮助来解决此问题。

【问题讨论】：

为什么有两个提交按钮？
输入中没有value=""
@wolfgang1983 我有两个提交按钮，用于将输入值转到两个不同的控制器，我想如果我有占位符，它将获得其中的值。
占位符值不是通过提交发布的。
@DFriend 当我使用 form_open 时，确实提交了占位符值

标签： jquery ajax codeigniter controller

【解决方案1】：

其实一切都很好，只要把你的旧代码改成这个

method: 'POST',
data: { writtenamount: $("#amount").data('value')},

【讨论】：

【解决方案2】：

您需要检查$userProvidedAmount 是否具有可用值。

$userProvidedAmount = $this->input->post("writtenamount");
if(!empty($userProvidedAmount))
{
   $data['provided_amount'] = $userProvidedAmount;
   $this->load->view("firstPage", $data);
   $this->load->view('footer');
}
else
{
   //load (or reload) the form with a prompt about the amount being required
}

你真的需要学习如何使用form validation。

在“首页”视图中访问这样的数据。

<div>You entered <?= $provided_amount; ?>. Thanks for your support!</div>

【讨论】：

你好，我按照你的方法试过了，但问题是，它甚至没有进入控制器，从表单的第一页开始，所以我猜表单有问题和脚本。
我真的很想对你的答案投赞成票，但由于我只有 12 的声誉，所以对不起。

【解决方案3】：

不确定，但在我看来，当您点击提交按钮时，您有两件事情正在发生。

1) 您正在调用 jQuery ajax 方法，该方法将发送一个 ajax 请求并提醒响应。
2）表单以正常（非ajax）方式提交。这是因为您没有停止提交按钮的默认行为，因此页面会重新加载。

所以，您可以添加一个 preventDefault();到您的 jQuery 单击处理程序方法（确保将事件参数添加到此处理程序）：

$('#btn1').click(function( event ) { 
   $.ajax({
     url: 'moneyexchange/invest_first_page',
     type: 'POST',
     data: { 
        writtenamount: $("#amount").val()
     },
     success: function (result) {
        alert(result);
     }
  });  


  // stop default behavior of form submission
  event.preventDefault();

});

或者，由于您想使用非 ajax 方法提交表单，这些并不是真正的提交按钮，您可以将按钮的输入类型更改为“按钮”而不是“提交”：

<form>
    <input id="amount"  type="text" placeholder="Amount in &euro;"  name="writtenamount"/>
    <button class="btn btn-lg" type="button" id="btn1" >BTN1</button> 
    <button class="btn btn-lg" type="button" id="btn2">BTN2</button>
</form>

我认为这两种方法都有效。我很想更改输入，因为“提交”的类型在这里会产生误导——当这些被选中时，你真的不想提交。

我希望我正确理解了你的问题，并且我说得有些道理。

【讨论】：