Question

我有6个字段和1个搜索按钮的搜索表单。当用户填写表单deatails并单击搜索按钮时，我需要使用jquery ajax将表单字段值作为json发送到服务器。

然后服务器将发送搜索值并返回响应，然后我需要在ui中填充这些值。我需要jquery ajax的示例UI代码。请有人帮忙吗？下面是我的html表格

def fetch_resources(uri, rel):
    if uri.startswith(settings.MEDIA_URL):
        path = os.path.join(settings.MEDIA_ROOT,uri.replace(settings.MEDIA_URL, ""))
    elif uri.startswith(settings.STATIC_URL):
        path = os.path.join(settings.LOADING_STATIC_FOR_PDF,uri.replace(settings.STATIC_URL, ""))
    return path

def preview_pdf(request):
    context = RequestContext(request)
    if request.method == 'GET':
        context = {
            # sending data to html 
        }
        rendered_html = render_to_string("path/xxx.html", locals())
        template = get_template('path/xxx.html')
        html = template.render(context)
        result = StringIO.StringIO()
        file = open('test.pdf', "w+b")
        pisaStatus = pisa.CreatePDF(html.encode('utf-8'), dest=file, encoding='utf-8',link_callback=fetch_resources)
        file.seek(0)
        pdf = file.read()
        file.close()
        return HttpResponse(pdf, 'application/pdf')

Answer 1

你去吧

Convert form data to JavaScript object with jQuery

但在此之前，您必须为每个输入元素添加name属性。

因此该名称将是您的json密钥，框中的数据将是该密钥的值，如下所示

<input name='username' value='' />

将成为

{"username": "john"}

jhon是在输入框中输入的值。

**编辑（Ajax代码）**

$(function() {
    $('#customerDetailSearchForm').submit(function() {
     $.post("//your URL here",JSON.stringify($('#customerDetailSearchForm').serializeObject()), function(result){

        alert("Data posted successfully!!");

    });
  });
});

如果您没有

形式的提交按钮，请

或替换以下行

$('#customerDetailSearchForm').submit(function() {

与

$('#search').click(function() {

Answer 2

这是我在Asp.net MVC中使用的简单Ajax代码我想这会对你有帮助，

$.ajax({
                beforeSend: function (xhr) {
                    AjaxRequestStart();
                },
                error: function (result) {
                                     },
                complete: function () {
                    AjaxRequestFinish();
                },
                url: '@Url.Content("~/Project/SaveProject")',
                type: 'POST',
                data: $('#frmAddProject').serialize(),
                success: function (result) {

                }
            });

Answer 3

首先，您需要更改HTML表单代码，以便在文本字段中包含name属性，如下所示

<form name="NAME" id="customerDetailSearchForm" action="">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="search">Search</button>

这是必需的，因为我们将jQuery serializeArray() Method使用creates an array of objects (name and value) by serializing form values.

现在jQuery部分从表单中形成JSON数据并进行AJAX调用。

<script type="text/javascript">
$(document).ready(function(){
  $("#search").click(function(){

     var frm = $("customerDetailSearchForm").serializeArray();
      var obj = {};
      for (var a = 0; a < frm.length; a++) {
         obj[frm[a].name] = frm[a].value;
      }
        var jsonData = JSON.stringify(obj);

    $.ajax({ 
        type: 'GET', 
        url: 'http://example.com', 
        data: jsonData , 
        dataType: 'json',
        success: function (data) { 
           // add result to UI code over here
        }
    });
  });
});
</script>

修改

编辑上面的javascript代码段以生成正确的JSON值

Answer 4

我赞同@Aniket。首先为每种输入类型添加名称。

<form name="NAME" id="customerDetailSearchForm" action="your_url">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" onclick="_submit();" type="button" id="search">Search</button>

要调用ajax，您可以使用它。

function _submit{
       $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'your_url',
                data: $("#customerDetailSearchForm").serialize(),
                success: function(responseData, textStatus) {
                    // you implementation logic here
                },
                complete: function(textStatus) {

                },
                error: function(responseData)
                {

                }
            });
        }

Answer 5

您可以在表单提交

上参考以下示例ajax调用


    $("#customerDetailSearchForm").submit(function(e) {

             var postData = $('#conatctUs').serializeArray();
             var formURL = $('#conatctUs').attr("action");
             var formName  = $('#conatctUs').attr('name');

             $.ajax({
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data)
                    {
                        if(data.status){
                            console.log(data);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {

                    }


            e.preventDefault(); 
    });

如何获取表单字段值并使用ajax jquery作为json发送到服务器

5 个答案: