标签: ajaxform

axios POST请求正在访问控制器上的url,但是将空值设置为我的POJO类,当我浏览chrome中的开发人员工具时,有效负载包含数据.我究竟做错了什么？

Axios POST请求:

var body = {
    userName: 'Fred',
    userEmail: 'Flintstone@gmail.com'
}

axios({
    method: 'post',
    url: '/addUser',
    data: body
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

浏览器响应:

如果我将标题设置为:

headers:{
  Content-Type:'multipart/form-data'
}

请求抛出错误

发布multipart/form-data时出错.Content-Type标头缺少边界

如果我在邮递员中提出相同的请求,它的工作正常并将值设置为我的POJO类.

任何人都可以解释如何设置边界或如何使用axios发送表单数据.

我在AjaxForm文件上传和应用程序引擎blobstore方面遇到了一些困难.我怀疑难度是因为blobstore上传处理程序(blobstore_handlers.BlobstoreUploadHandler的子类)要求重定向响应,而不是返回任何内容,但我不确定.我期待得到一个XML文档,它似乎按预期到达浏览器,但我无法掌握它 - 详情如下.

我的app引擎blobstore上传处理程序如下 -

class UploadHandler(blobstore_handlers.BlobstoreUploadHandler):
  def post(self):
    upload_files = self.get_uploads('file')  # 'file' is file upload field in the form
    blob_info = upload_files[0]

    entity_key = self.request.get("entityKey")

    // Update a datastore entity with the blobkey (not shown)

    // redirect to the uri for the updated entity
    self.redirect('%s.xml' % entity_key)

最后的重定向是我的应用程序中的uri,它返回一个xml文档.查看服务器输出,没有迹象表明出现任何问题 - 重定向已得到服务,并且按预期返回xml文档,并使用正确的mime类型 - 因此表单提交看起来很好,服务器对该提交的响应看起来很好好.

我的客户端代码使用ajaxForm看起来如下(对不起它有点迟钝,我不认为问题在这里) -

// Create the form
var dialogForm = $("<form method='POST' enctype='multipart/form-data'>")
   .append("<span>Upload File: </span><input type='file' name='file'/><br>")
   .append("<input type='hidden' name='entityKey' value='" + entityKey + …

我试图使用jquery形式,但它在concole ajaxForm不是一个函数.正确包含了jquery.form.js,代码在文档就绪函数中...

这是脚本:

$("#apply-form").ajaxForm({

                beforeSend: function()
                {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                },
                success: function()
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                },
                complete: function(response)
                {
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
            });

这是HTML表单

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div> …

我在MVC中有简单的ajax形式.在AjaxOptions中,OnComplete设置为简单的javascript函数,它只做一件事 - 返回false.

@using (Ajax.BeginForm("Action", "Controller", new AjaxOptions { UpdateTargetId = "DivFormId", HttpMethod = "Post", OnComplete = "preventUpdate" }))

function preventUpdate(xhr) {
    return false;       
}

问题是,该页面已经更新.例如,在一个案例中,控制器在回发后返回部分视图,在其他情况下,它返回一些Json对象.我希望它在返回部分视图时更新页面,并在返回json时显示对话框窗口.不幸的是,当返回json时,它会清除页面(用json更新它),即使OnComplete函数返回false,如MSDN所说:要取消页面更新,请从JavaScript函数返回false.

如何根据收到的响应阻止页面更新？

谢谢!

-----更新-------

到目前为止,我找到了以下解 当我没有指定UpdateTargetId时,我可以手动执行我想要的响应.但是仍然没有记录返回false的行为.

我在rails中有一个模型创建表单,我也通过ajax返回JSON.到目前为止我的代码看起来像:

$('#new_stem').ajaxForm({ //#new_stem is my form
  dataType: 'json',
  success: formSuccess
});

function formSuccess(stemObj) {
  //does stuff with stemObj
}

我有一个带有文件上传器的多部分表单(但我不确定这是否相关).

当我提交表单时它工作正常(我的模型正确创建并呈现为json),但是不是由formSuccess函数处理的json,而是提示下载"stems.json"(我的词干创建的路径)动作)在Firefox中.

会导致这种情况发生的原因,以及可以解决的问题是什么？不确定这是否是问题的一部分,但我的表单中没有提交按钮,我有一个链接,点击处理程序调用$('#new_stem).submit()

多谢你们!

编辑:Firebug告诉我标题包含以下内容:

Etag        "b53e5247e7719cf6b1840e2c6e68781c"
Connection      Keep-Alive
Content-Type    application/json; charset=utf-8
Date        Mon, 03 May 2010 02:19:31 GMT
Server      WEBrick/1.3.1 (Ruby/1.8.7/2010-01-10)
X-Runtime       241570
Content-Length  265
Cache-Control   private, max-age=0, must-revalidate

加上一个cookie标题

我正在使用这里找到的ajaxForm插件

现在我有一个形式与用户名和密码

我的要求是将密码字段的值更改为其md5,以便我使用此处的插件

所以我这样使用:

$('myForm').ajaxForm({

   url : 'pathtosend',
   type : 'post',
   beforeSubmit : function(arr, $form, options){
      $('#password').val($.md5($('#password').val()));
   },
   success : function(response, statusText, xhr, $form){
      alert('blah blah');
   }
});

现在,当我在java servlet代码中打印密码值时,它会显示我传递的密码值,而不是像我所做的那样显示值的md5.

当我将编码更改为单击提交按钮并操纵提交时,我的问题是,当提交的数据未在提交中反映时,beforeSubmit的意义是什么

我在使用不显眼的ajax从联系我们表单发布数据时遇到了麻烦.

我的部分视图是这样的:

@model site.ViewModel.Home.ContactUsViewModel 

@using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                       new AjaxOptions { UpdateTargetId = "result" }))
        {
            <fieldset>
                <legend>Contact Us</legend>
                @Html.ValidationSummary(true)
                <div id="result"></div>
                <div class="editor-label">
                 @Html.LabelFor(m => m.FullName)
                 @Html.ValidationMessageFor(m => m.FullName)</div>
                <div class="editor-field">@Html.TextBoxFor(m => m.FullName)</div>
                <!-- other fields from model -->
                <input type="submit" value="Submit"/>
            </fieldset>
        }

我的部分视图放在另一个页面上,如下所示:

@Html.Partial("_ContactUsPartial", new ContactUsViewModel());

我的家庭控制器是这样的:

[HttpPost]
public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
{
    if (ModelState.IsValid)
    {
       try
       {
           //send email
           return Content("Thanks for your message!");
       }
       catch (Exception ex)
       {
          return Content("Problem sending the email.");
       }
    }

            return …

看起来Remotipart实际上并没有被用来提交我的表单,因此当我查看提交表单的params时,图像完全被遗漏了.

remotipart_submitted? 返回false

PARAMS: {"utf8"=>"?", "product"=>{"name"=>"RemotipartFails", "price"=>"10", "description"=>"Please work"}, "action"=>"create", "controller"=>"products"}

下面是更相关的代码

宝石

gem "jquery-rails"
gem "remotipart", "~> 1.2"

使用Javascript

//= require jquery
//= require jquery_ujs
//= require jquery.remotipart

形成

<%= form_for(:product, url: products_path, remote: true, html: { multipart: true, class: "form-horizontal" }) do |f| %>
  <div class="margin-top-10 margin-bottom-10">
    <div class="input-left">
      <%= f.text_field :name, { placeholder: "Name", class: "form-control" } %>
    </div>
    <div class="input-right">
      <%= f.number_field :price, { placeholder: "Price", class: "form-control" } %>
    </div>
    <div class="clearfix margin-bottom-10"></div>
    <div class="input-full"> …

我正在使用ajaxForm()框架工作来发送我的数据,而无需重新加载我的页面.

    $('#ReplayForm').ajaxForm({ 

      success : function(data){
             alert("Success");
       }   
    });  

现在,我想在提交表单之前检查一些条件,如果条件为假,则停止提交,否则继续.

是否有任何解决方案来完成这项工作或有任何方式购买我可以执行此操作.提前致谢.

我有一个包含JQuery UI Tabs小部件的网页.Tab小部件通过AJAX加载选项卡.在其中一个标签页(将其命名为DescriptionPage)中,我有一个将通过ajaxForm插件提交的表单.

<div id="tabs">
    <ul>
        <li>
           <a href="DescriptionPage">Description Page</a>
        </li>
    </ul>
</div>

这是我的DescriptionPage的内容.

<form id="myForm">
  <!-- Form elements goes here -->
</form>

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').parent().empty().append(response);
    });
  });
</script>

提交表单后,将返回相同的DescriptionPage,包括表单和脚本.因此,表单内容将替换为服务器端的响应.响应还包含验证消息.

问题是,整个场景在Chrome和Firefox中运行良好.但在Internet Explorer 8中,会出现一个奇怪的问题.

首次加载选项卡时,javascript成功执行.当用户提交表单并且放置响应时,IE无法执行我的javascript,说"JQuery未定义".

为什么IE无法在通过ajax加载的内容中调用JQuery？有解决方法吗？

PS:我想从html中分离脚本,但它根本不是一个选项:(

P.S2:由于愚蠢的IE,我的javascript和CSS文件变得一团糟.